Pseudo element exists but not visible

Question

The pattern has before content inject into the page, but it's not visible can you please suggest what is the issue?

.aloha { font-family: Medium; font-size: 74px; color: green; position: relative; display: inline-block; margin: 0; height: 85px; } .aloha:before { width: 100%; height: 85px; color: red; content: attr(data-text); display: block; }

 <h1 date-text='TEXT' class='aloha'>TEXT</h1>

Since this is a simple typo I recommend to delete this question as it has no value to future users — Asons
– Asons, Commented Jun 2, 2017 at 15:06

Sebastian Brosch · Accepted Answer · 2017-06-02 14:39:26Z

3

There is a typo in your HTML. Replace date-text with data-text on your <h1> element:

.aloha { font-family: Medium; font-size: 74px; color: green; position: relative; display: inline-block; margin: 0; height: 85px; } .aloha:before { width: 100%; height: 85px; color: red; content: attr(data-text); display: block; }

<h1 data-text='TEXT' class='aloha'>TEXT</h1>

answered Jun 2, 2017 at 14:39

Sebastian Brosch

43.8k15 gold badges78 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

j08691 Over a year ago

Flag to close as off-topic due to a typo

volna Over a year ago

Thank you Sebastian, will pay more attention next time :)

Sebastian Brosch Over a year ago

@j08691 - just for info: is in such a case an answer ok or should I only flag and comment? (I flagged)

j08691 Over a year ago

You should always flag typo questions for closure. Answering is optional, but can easily be done as a comment.

Collectives™ on Stack Overflow

Pseudo element exists but not visible

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related