Asked  7 Months ago    Answers:  5   Viewed   30 times

How do you use the CSS content property to add HTML entities?

Using something like this just prints   to the screen instead of the non-breaking space:

.breadcrumbs a:before {
    content: ' ';



You have to use the escaped unicode :


.breadcrumbs a:before {
    content: '000a0';

More info on :

Tuesday, June 1, 2021
answered 7 Months ago

It's 2015 now, and Apple announced Safari 9, which supports a new CSS feature, the backdrop-filter. Using this CSS rule on your div applies filters to elements behind it only:

#myDiv {
    backdrop-filter: blur(10px);


This feature is currently only available in Safari anyway (and the -webkit prefix is required for it to work), so I don't recommend using it for now. If you do so, be sure to make use of @supports or/and JS to implement fallback for browsers that don't support it yet:

@supports (backdrop-filter: blur(10px)) {
    #myDiv { background: #181818; }

Here's the compatibility table at, as well as the Chromium and Firefox feature requests.

Learn more about what's new in Safari.

Sunday, August 1, 2021
answered 5 Months ago

You can just scroll your editor to the inserted icon. Pay attention on two lines of code just after you move selection. Hope it works as you expected :)


To cover all the cases we need to check whether inserted image is in or out the editor bounds. First, let's add id to the editor element just to find it more easy. Then we can utilize the function getBoundingClientRect returning an actual element's rectangle on the screen. Finally, we compare the rectangles and if the image rectangle is not inside the editor (imgRect.left < editorRect.left || imgRect.right > editorRect.right) then we scroll.


During the investigation of the problem described in the latest comments I found that after certain length of edited content jQuery function 'offset' returns not accurate results. Most probably, it's because the editor's leftOffset is not automatically updated in this circumstances. Finally, I changed the desired scroll position calculation to image DOM element's offsetLeft minus editor element's offsetLeft minus 1 (border size) and now it works fine with any content length.

function pasteIcon(html) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment(),
        node, lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      if (lastNode) {
        range = range.cloneRange();

   	    var editorRect = $(contEdit)[0].getBoundingClientRect();
       	var imgRect = $(lastNode)[0].getBoundingClientRect();
       	if (imgRect.left < editorRect.left || imgRect.right > editorRect.right) {
          var actualLeft = $(lastNode)[0].offsetLeft - editorRect.left - 1;
  } else if (document.selection && document.selection.type != "Control") {

$(document).ready(function() {
  $('.buttOn').click(function() {
    pasteIcon('<img class="icOn" src="">');
[contenteditable="true"] {
  display: inline;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: inherit;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;

[contenteditable="true"] br {
  display: none;

.contAiner {
  display: flex;

.buttOn {
  width: 24px;
  height: 24px;
  border: none;
  background: #666;
  color: white;

.contEd {
  height: 22px;
  text-align: center;
  width: 100px;
  line-height: 23px;
  color: black;
  font-size: 10.5px;
  font-family: arial;
  border: 1px solid black;

.icOn {
  width: 9px;
  height: 13px;
  top: 1px;
  position: relative;
<script src=""></script>
<div class="contAiner">
  <input class="buttOn" type="button" value="B">
  <div id="contEdit" class="contEd" contenteditable="true" spellcheck="false" autocomplete="off"></div>
Wednesday, September 29, 2021
answered 3 Months ago

Boilerplate's css uses few hacks like * (*font-size:small;) and some browser specific css rules - if you are really concerned about validation just move the hacky rules out of the main style.css and load them for the browser that needs them only.

You can be either hacky and crossbrowser or valid and degraded. And don't forget that boilerplate also states:

Think there's too much? The HTML5 Boilerplate is delete-key friendly. :)

But if you ask me - its waste of time trying to pass the css validation and still be crossbrowser compatible - if your client demands it and has extra money to pay for the css valid badge (which probably won't generate them any extra income) than go for it, if you personaly are obsessed by having to pass it go for it - otherwise it's nonsense and waste of your time. If you wrote all of the valid css3 rules correctly and used a few vendor specific rules it won't really kill anyone.

Overall Boilerplate is a solid template and perfectly ok to use for every day projects and the problems you are exposing are more of a perfectionist's view on the thing. This would be my 2 cents on this.

Sunday, October 10, 2021
Jakob Gade
answered 2 Months ago

From: Sven Wolfermann via CodePen

You can add a leading zero by including decimal-leading-zero to your li:before{ content: counter(...); }

li:before {
  counter-increment: li;
  content: counter(item, decimal-leading-zero);
Sunday, October 17, 2021
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :