Li:Before{ Content: "■"; } How to Encode This Special Character as a Bullit in an Email Stationery

li:before{ content: ■; } How to Encode this Special Character as a Bullit in an Email Stationery?

Never faced this problem before (not worked much on email, I avoid it like the plague) but you could try declaring the bullet with the unicode code point (different notation for CSS than for HTML): content: '\2022'. (you need to use the hex number, not the 8226 decimal one)

Then, in case you use something that picks up those characters and HTML-encodes them into entities (which won't work for CSS strings), I guess it will ignore that.

Various possible uses of the content: property in css2/css3

Oh, too many to list. Some of the most common cases are:

• Special numbering, with the counter() function, along with the counter-reset and counter-increment properties

• Pure CSS clearfix with:

  .foo:after {
      content: "";
      display: block;
      clear: both;
  }
  

• Display attributes, eg to print URLs for hyperlinks in a print stylesheet

  a[href]:after {
      content: ' (' attr(href) ') ';
  }
  

• Add typographic ornaments that shouldn't be in the HTML because they're presentational. For example, in my blog, I've used it for the ornaments between posts or sidebar links.

• Add icons to hyperlinks, depending on where they point, like

  a[href^="http://twitter.com/"]:before {
      content: url('twitter-icon.png');
  }
  

• Adding a pointer to make a CSS-only speech bubble:

  .bubble {
      position: relative;
      background: silver;
  }
  
  .bubble:after {
      content: "";
      border:10px solid transparent;
      border-top-color:silver;
      position: absolute;
      bottom:-20px
  }
  

And many, many other.

Just beware: If something is not presentational, it should probably be in your HTML. Users will not be able to select CSS generated content, and screen readers will ignore it.

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

The most common way to do this is something along these lines:

ul {  list-style: none;  padding: 0;  margin: 0;}
li {  padding-left: 1em;   text-indent: -.7em;}
li::before {  content: "• ";  color: red; /* or whatever color you prefer */}

<ul>  <li>Foo</li>  <li>Bar</li>  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li></ul>

How do I get to know value of this unusual character? square matrix having digits inside

They are all unprintable control characters, the box is just a way to print them. Another option is to not show them at all but then you wouldn't know about them as easily.

There's

• 0x1F Unit separator
• 0x7F Delete
• 0x01 Start of Heading
• 0x1C File Separator

(You can read all of the above from the boxes already)

Since these are almost never used in text, you should probably not treat them as text. If you look at the meaning of them as control characters, they don't make sense even as control characters.

---

Related Topics