CSS內容大膽一字一句

我有以下的CSS其中一個元素後增加了一些文字：CSS內容大膽一字一句

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

我的目標是使第一個字加粗和文本不加粗的其餘部分。

我知道如何使所有的文本加粗，我知道我能做到這一點使用HTML，但我現在的目的，我想嘗試實現這一使用CSS。

沒有關於此的搜索結果的谷歌，它可以做？

來源

2015-08-28 Alex

不，你不能。你需要幾乎一小段JavaScript [ –

] [CSS來增加第一個字的大小]（http://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word） – Tushar

使用'：之前'和'：之後'定位絕對可能是一個解決方案。在'：before'之前，你可以加上粗體文本，然後在'：after'之後，你可以放正常文本。我不完全清楚，最終的結果是什麼。 – sunpietro

OK，這個怎麼樣的一個創造性的解決方案？繪製文本爲SVG，並在數據URI的形式，以此爲:after僞元素的content值：

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/

我認爲這是就像您將在單個僞元素上進行富文本格式化一樣。我認爲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

但是'：第一個詞'不存在... – Jared

@Jared他發佈的鏈接是什麼？你看起來了嗎？ – Alex

@theblackgigant感謝您的評論 - 我不是如何將這與後。我嘗試過頭h1：after :: 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; for :before pseudoelement以plac E - 這在視覺下面:after pseudoelement

來源

2015-08-28 07:27:08 fcalderan

這將意味着一半的文本是在父div和一半之後？ – Alex

@alex：請注意，從可訪問性或語義角度來看，這個解決方案不應該比使用單個僞元素更糟糕。如果語義或可訪問性問題，則該文本必須包含在標記中 – fcalderan

大廈關閉Jared的答案的，這裏有一些有用的標籤在URL中包括：

開始

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像素x到佔空間（空間必須有或標籤將不會呈現）

大膽

<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>");

這裏有一個小提琴：

JSFiddle

這裏是我做出HTML轉換成該SVG代碼谷歌表：（請記住，這僅與<b>, <i>, <br>標籤作品）

Google Sheet

來源

2017-09-25 19:33:29

CSS內容大膽一字一句

回答

相關問題