CODEWITHSUNDEEP
html
Bhavik Sejpal
Bhavik Sejpal

Reputation: 15

How to modify content inside <h1> tag only using HTML page not using JavaScript

I want the text "Hello from this side" to change if the CSS media query matches.

<html>
<head>
  <title></title>
</head>
<body>
  <h1>Hello from this side</h1> 
</body>
</html>

In other words, how do I change the content in <h1> tag, whenever the page runs in a browser without using JavaScript?

Upvotes: 0

Views: 188

Answers (1)

Adhitya
Adhitya

Reputation: 665

This example added text with @media css, setting up max-width or min-width.

HTML

<html>
<head>
  <title></title>
</head>
<body>
  <h1 id="example-h1"></h1> 
</body>
<html>

@media CSS

#example-h1:before {
    content: "This is some great text here.";
}

@media (max-width: 670px) {
  #example-h1:before {
     content: "This is some other super great text.";
  }
}

Will get output like this snippet

#example-h1:before {
    content: "Yes I'm here";
}

@media (max-width: 670px) {
  #example-h1:before {
     content: "Oh no! I'm There.";
  }
}
<html>
<head>
  <title></title>
</head>
<body>
  <h1 id="example-h1"></h1> 
</body>
<html>

Upvotes: 1

Related Questions