Is it possible to solve the problem on bare CSS? The proposed option was:

strong::first-letter { display:inline; } strong { display:none; }

But he did not work. Is it possible to crank it in general?

Update

There is a text decorated in a color longitudinal frame. It is necessary to leave the means of bare CSS instead of a rectangle with the text a small circle with the first letter of the text itself. It is not a question to make a circle from a rectangle, but to leave one letter from the text ...

Variants such as “process with javascript” or “affect output” are not considered.

You can consider the option - leave instead of the line UTF-8 character. But then again, on CSS, without touching the layout, is it possible?

  • And what is the problem)? - Crus
  • strong {width: 10px; letter-spacing: 5px; overflow: hidden} mb somehow? Ie, push the letters apart, and show only the first H pixels to fit the first letter. the rest is hidden. - Crus
  • @Crus, the circle will not be in your version - MasterAlex
  • one
    I tried to push an idea, and not to write a working code ^ _ ~ Cool if it worked out.) - Crus
  • one
    @lopar, because I wrote, as I used to, in sass, but not css jsfiddle.net/3zc6htsg/1 - etki

1 answer 1

  1. The :first-letter pseudo :first-letter applies only to block elements, such as p, div , as well as elements whose display value is specified as inline-block, table-caption or table-cell.
  2. It is permissible to use only the properties related to the font, changing the color of the text and background.

UPD.

Modified the @Crus version to a working example :

 div { font-size: 12px; height: 50px; width: 50px; overflow: hidden; color: #fff; } div:first-letter { font-size: 18px; line-height: 50px; border-radius: 50px; padding: 10px 17px; border: 1px solid #ccc; color: #000; }