0

Можно ли на голом CSS решить поставленную задачу? Предположительный вариант был:

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

Но он не сработал. Это вообще можно провернуть в чистом виде?

Обновление

Есть текст, оформленный в цветной продольной рамочке. Надо средствами голого CSS оставить вместо прямоугольника с текстом маленький кружочек с первой буквой этого самого текста. Круг из прямоугольника сделать — не вопрос, а вот от текста одну букву оставить...

Варианты типа «обработать яваскриптом» или «повлиять на вывод» не рассматриваются.

Можно рассмотреть вариант — оставить вместо строчки UTF-8 символ. Но опять же, на CSS, не трогая вёрстку, так разве можно?

14
  • А задача то какая)?
    – Crus
    19 мар 2015 в 20:02
  • strong { width:10px; letter-spacing:5px; overflow:hidden } мб как-то так? Т.е., раздвигаем буквы, и показываем только первые Н пиксилей чтобы влезла первая буква. остальное - скрываем.
    – Crus
    19 мар 2015 в 20:15
  • @Crus, круга не будет в вашем варианте
    – MasterAlex
    19 мар 2015 в 20:23
  • 1
    Я пытался натолкнуть на идею, а не написать рабочий код ^_~ Круто, если получилось.)
    – Crus
    19 мар 2015 в 20:47
  • 1
    @lopar, потому что я написал, как привык, в sass, а не css jsfiddle.net/3zc6htsg/1
    – etki
    19 мар 2015 в 23:07

1 ответ 1

3
  1. Псевдокласс :first-letter применяется только к блочным элементам, например, p, div, а также к элементам, у которых значение display задано как inline-block, table-caption или table-cell.
  2. Допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.

UPD.

Доработал вариант @Crus до работающего примера:

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;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.