содержание CSS полужирный одно слово

У меня есть следующие CSS, который добавляет некоторый текст после элемента:содержание CSS полужирный одно слово

header h1:after { 
    content:"Bold \A not bold"; 
    white-space: pre; 
}

Моя цель сделать первое слово жирным шрифтом, а остальной текст не жирным.

Я знаю, как сделать весь текст полужирным, и я знаю, что могу достичь этого с помощью HTML, но для моих целей я хочу попытаться достичь этого с помощью CSS.

Нет результатов поиска по этому вопросу для google, не может быть сделано ??

источник

2015-08-28 Alex

Нет, вы не можете. Вам нужно чуть ли не кусочек javascript –

возможный дубликат [CSS для увеличения размера первого слова] (http://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word) – Tushar

Использование ': before' и': after' позиционируются абсолютно как решение. В ': before' вы можете выделить полужирный текст, затем в': after' вы можете поместить обычный текст. Я не знаю точно, что ожидается как окончательный результат. – sunpietro

OK, как это для творческого решения? Нарисуйте текст как SVG, и использовать это в качестве content значения :after псевдо-элемента в виде данных URI:

header h1:after{ 
    content:url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='14' width='85'><text style='alignment-baseline:hanging;font-size:14px;font-family:Arial,sans-serif;fill:#000;'><tspan style='alignment-baseline:inherit;font-weight:bold;'>Bold</tspan> not bold</text></svg>"); 
}

Вот оно в действии: http://jsfiddle.net/ojx5s0kc/1/

Я думаю, что это как можно ближе к форматированию форматированного текста на одном псевдоэлементе.

Примечание: Я проверил это на Chrome, но я считаю, что IE требует кодировать код SVG в качестве действительного URI (т.е. Вы должны кодировать все эти скобки, пробелы и т.д.). Возможно, вы можете использовать инструмент like this.

источник

2015-08-28 14:15:33 Jared

Это не работает в FireFox :( – discort

Источник: https://css-tricks.com/a-call-for-nth-everything/

Вы, вероятно, ищет :first-word

источник

2015-08-28 07:25:14 theblackgigant

Но ': first-word' не существует ... – Jared

@Jared, что это за ссылка, которую он отправил тогда? Вы посмотрели? – Alex

@theblackgigant спасибо за ваш комментарий - я не знаю, как это сочетать после. Я пробовал заголовок h1: после: first-word, но он не распознает его. Идеи? – Alex

можно разделить предложение на два pseudoelements так:

h1 { font-weight: normal; display: table; } 

h1:after { 
    content:" Bold"; 
    font-weight: bold; 
} 

h1:before { 
    content:"not bold"; 
    display: table-footer-group; 
}

Codepen: http://codepen.io/anon/pen/RWbQVw

здесь я display: table-footer-group; для :before Псевдоэлемент для плака e это визуально ниже :after pseudoelement

источник

2015-08-28 07:27:08 fcalderan

, что означало бы половину текста перед родительским div и половину после? – Alex

точно @alex: обратите внимание, что с точки зрения доступности или семантики это решение не должно быть хуже, чем использование одного псевдоэлемента. если смысл семантики или доступности, то этот текст должен быть включен в разметку – fcalderan

здание от ответа Джареда, вот некоторые полезные теги включают в URL:

Start

content:url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><text style='alignment-baseline:hanging;font-size:14px;font-family:Arial,sans-serif;fill:#008ef4;'>

Новая линия

<tspan x='-4' dy='14'> </tspan>

Этот перемещает курсор вниз 14px, и установить его в абсолютной -4 рх х для учета пространства (пространство должно быть там или метка не будет оказывать)

Жирный

<tspan style='alignment-baseline:inherit;font-weight:bold;fill:#5b5b5b;'> Your Text Here </tspan>

Курсив

<tspan style='alignment-baseline:inherit;font-style:italic;fill:#5b5b5b;'> Your Text Here </tspan>

Конец

</text></svg>");

Вот Fiddle:

JSFiddle

А вот Google лист я сделал для преобразования HTML в этом SVG-код: (Имейте в виду, что это работает только с <b>, <i>, <br> тегами)

Google Sheet

источник

2017-09-25 19:33:29

содержание CSS полужирный одно слово

ответ

Смежные вопросы