How to add header text using css

Question

I have the following html and this is part of the html in the header section of the site.

<body>
 <div id="headerMain" class="header flex-row start-xs">
   <div class="flex-col-xs-nofill">
     <div class="headerlogo> 
        <img src="image.svg" >
     </div>
   </div>
   <h1></h1>
 </div>

I am trying to give the header content as "MySite" as like below using css

 #headerMain h1:before {
 content: MySite
}

But this is not getting updated. I am trying to find the solution and learn in the process.

Just wanted to give a heads-up that search engines won't pickup on the text inside the <h1> which isn't a problem inside application but if this is a marketing website, this can lead to a lower ranking on for example Google. — Arno Tenkink
– Arno Tenkink, Commented Jul 25, 2022 at 10:33

Stephen · Accepted Answer · 2022-07-25 10:26:15Z

3

Try this,

 .header h1::before {
    content: "MySite";
 }

working example

answered Jul 25, 2022 at 10:26

Stephen

916 bronze badges

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

Comments

msafeiyahya96 · Accepted Answer · 2022-07-25 10:51:12Z

1

You must add quotes to attribute values on MySite. it works on me. The code is like below:

#headerMain h1:before {
  content : "Mysite";
}

<body>
 <div id="headerMain" class="header flex-row start-xs">
   <div class="flex-col-xs-nofill">
     <div class="headerlogo> 
        <img src="image.svg" >
     </div>
   </div>
   <h1></h1>
</div>

answered Jul 25, 2022 at 10:51

msafeiyahya96

414 bronze badges

Collectives™ on Stack Overflow

How to add header text using css

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related