Adding HTML Entities Using CSS Content

Adding HTML entities using CSS content

You have to use the escaped unicode :

.breadcrumbs a:before {
  content: '\0000a0';
}

More info on : http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Can you use HTML entities in the CSS “content” property?

put hex value of your bullet specail character like this

div:before{
    content:"\2022";
    color:#f00;
}

check this fiddle http://jsfiddle.net/sandeep/HPrkU/1/

NOTE: after & before work in IE8

CSS put html entity as content

CSS isn't HTML. You can't use HTML entities in it.

Use the literal character (✖) or a CSS unicode escape instead.

How do I put character • ::before an element?

CSS :before and :after's content accepts escaped \ Unicode HEX representation of a character.

Let's learn how to get to it:

We could use content: "•"; but since we were thought to avoid special characters in favor of their primitive Unicode representation so that we don't get caught in defining @charset "utf-8"; in stylesheets and saving as such.
Let's find such HEX value!

Open up Developer console and write:

"•".charCodeAt(0)               // 8226     ( base10 )

the above will yield 8226 which is the Decimal Numeric value we generally use in HTML like • to get •. Almost there...

Now let's do:

"•".charCodeAt(0).toString(16)  // "2022"   ( base16 )

console.log(    "•".charCodeAt(0).toString(16))

css html entity

#menu1 a:hover:after {
  content:"\2192 ";
}

Working example: http://jsfiddle.net/wCzUf/

More details - Can you use HTML entities in the CSS “content” property?

List of HTML entities - http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

How to use html entities in CSS content property?

Hmm I found that website : http://www.evotech.net/articles/testjsentities.html

And it looks like the é (é, é) is converted into \00E9

And now, content: 'test with eacute \00E9'; works!

Add a text under the picture css content

So here you go, as you have asked to align the text Only 75€ to bottom. And also to change it's background.

CSS

.tooltipspan {

  background-image: url(https://i.ytimg.com/vi/Ue1eHtvWRTU/maxresdefault.jpg);
  background-size: contain !important;
  height: 150px !important;
  width: 150px !important;
  position:absolute;
  top:-70px;
  left:100%;
  transform:translateX(30%);
  display:none;
  z-index: 3;
  line-height:250px;
  border: 2px solid #00cbb1;
  color: red;
  text-align: center;
  padding:5px;
  font-size:25px;
}
.labelopt:hover  .tooltipspan  {
  display:block;
}
.tooltipspan:after {
content:'Only 75€';
background: black;
height:30px;
color:white;
z-index:99999;
}
.labelopt {

    position: relative;
    max-width: 176px !important;
}
.clearfix{
position:relative;
}

HTML

<br><br><br><br>
<div class="clearfix product-variants-item col-xs-6">
      <span class="control-label labelopt tooltip12">Add Extra €75      <span class="tooltipspan" ></span></span>

              <select class="form-control form-control-select" id="group_12" >
                      <option value="48" title="No" selected="selected">No</option>
                      <option value="49" title="Yes">Yes</option>
                  </select>
          </div>

Sample Image

Adding HTML Entities Using CSS Content