CODEWITHSUNDEEP
htmlcsstags
fluffyyboii
fluffyyboii

Reputation: 645

Can I wrap tags around an element in CSS?

For example, could I wrap all <p> elements in <b> tags so <p>Hello</p> would be rendered as if it were <b><p>Hello</p></b>?

I tried using ::before and ::after like this:

p::before {
    content: "<b>";
}
p::after {
    content: "</b>";
}

but the tags were escaped. Is there some way to do this?

Upvotes: 0

Views: 395

Answers (2)

geoidesic
geoidesic

Reputation: 5063

No. This would be a misuse of CSS. CSS is not designed to alter markup, but to augment it with styling. If you could do what you are suggesting, we developers would all be in a living hell. You have some options:

Option 1

  • Wrap the content you want to make bold in a container
  • Give that container a class
  • Write a CSS class to make that container's content bold

e.g. Original HTML

<html>
  <h1>My content<h1>
</html>

New HTML

<html>
   <section class="bold">
      <h1>My content<h1>
   </section>
</html>
<style>
.bold {
  font-weight: bold
}
</style>

Option 2

  • If you can't alter the markup
  • Find a selector that will select the content you want
  • Write a CSS class to make that container's content bold
<html>
  <h1>My content<h1>
</html>
<style>
h1:first-of-type { 
  font-weight: bold
}
</style>

Note the :first-of-type for an example of specificity selector.

Upvotes: 3

voiarn
voiarn

Reputation: 547

You can simply use the font-weight property. Adding tags like this is not possible with CSS.

Example:

p {
  font-weight: bold;
}

Documentation here.

Upvotes: 1

Related Questions