Can I wrap tags around an element in CSS?-CodePudding

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

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?

CodePudding user response：

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 >
      <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.

CodePudding user response：

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

Example:

p {
  font-weight: bold;
}

Documentation here.

CodePudding user response：

You can't: p::after Insert something after the content of each

element

p::before Insert something before the content of each

element