CODEWITHSUNDEEP
htmlcsscustom-element
yO_
yO_

Reputation: 1155

a "preprocessor" for HTML? without JS

In a CSS sheet, I created a new tag

gb {
    color: green;
}

and in the HTML code, I would replace without javascript, all occurences of

<gb> &#9632; </gb>  <!-- green bullet -->

with something like <gb /> . (Like using the C preprocessor, but doing thing in native HTML/CSS, without need to another program (cpp) and action (preprocessing) before sending the page on the web)

In other terms, how could I create custom HTML tag, with content (saving typing the &#9632; code), but only using HTML/CSS ?

And, yes, a lot of content already address custom HTML tags, but

  1. They generally use Javascript
  2. It is not clear
  3. I can't believe such a little thing could involve these cumbersome solutions.

The idea is just to have a short way to draw an Unicode symbol (and in color) in middle of text.

Upvotes: 0

Views: 465

Answers (2)

Supersharp
Supersharp

Reputation: 31199

To use a custom tag that is valid regarding the HTML Living Standard, you'll just need to use a hyphen in your tag name.

<g-b>Hello</g-b>

Then you can follow the Valentin's answer "Option 1".

g-b::before {
  content: "\25A0";
  color: green;
}

r-b::before {
  content: "\25A0";
  color: red;
}
<g-b>Text 1</g-b>
<br>
<r-b></r-b>Text 2

Upvotes: 1

Valentin Genevrais
Valentin Genevrais

Reputation: 453

Option 1

You can (but you should not) create your own HTML tag: 

gb::before {
  content: "\25A0";
  color: green;
}
<gb>Your text</gb>

Option 2

You can use a list with <ul> an <li> tags:

ul {
  list-style: none;
  padding-left: 0px;
}

li:before {
  content: "\25A0";
  color: green;
  padding-right:5px;
}
<ul>
  <li>Line 1</li>
  <li>Line 2</li>
  <li>Line 3</li>
</ul>

Option 3

You can use a <span> tag : 

.gb::before {
  content: "\25A0";
  color: green;
  padding-right:5px;
}
<span class="gb">Your text</span>

Upvotes: 2

Related Questions