把一個符號放在h3後面或者用css括在同一行中

我製作了一個網頁。它有許多單詞包含在跨度和h3標籤中。現在我正試圖在CSS類的同一行上放置一些文字結尾的符號。我可以像下面使用background-image屬性與類的東西做到這一點：把一個符號放在h3後面或者用css括在同一行中

.newtohtml5{ 
     width:fit-content;   
     background-image:url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png); 
     background-repeat:no-repeat; 
     background-size:2%; 
     background-position-x:right;    
    }

但是這個類的問題是，HTML5符號出現在該行留下的文字和符號本身存在巨大空間的末端。我希望那個符號恰好出現在同一行中跨度中的文本之後，而不是在文本和符號之間有巨大空間的行的末尾。

我不想對HTML進行任何更改。雖然任何解決方案，讚賞。但只有CSS技巧會很棒。

來源

2012-11-10 Mahesha999

shouldnt display-style：inline;訣竅嗎？ – toxicate20

@ toxicate20你的意思是display：inline;沒有，這是控制換行符;和btw span是默認內聯顯示的; – Mahesha999

標題並沒有說明一切。您沒有包含標記，並且您沒有描述爲什麼使用人造的而不是廣泛支持的構造，而不是僅設置與圖像寬度匹配的正確填充。（這個問題也出現了，爲什麼圖像不是內容的一部分。） –

假設你不需要全面的跨瀏覽器的支持，並且只使用那些實現CSS3生成的內容和你想生成的內容包含在span內的文本後立即出現的瀏覽器都還好，你可以使用在::after僞元素：

<span class="newtohtml5">text here</span> <br/>

隨着CSS：

.newtohtml5::after { 
    content: ' (generated content).' 
}

JS Fiddle demo。

值得一提的是這個生成的內容是span的內容後，但仍內和的一部分，span本身。

您也可以使用元素的屬性在生成的內容包括，例如，用下面的CSS可以包括包含在class屬性中的字符串：

.newtohtml5::after { 
    content: ' (.' attr(class) ').'; 
}

JS Fiddle demo。

您也可以插入圖片到content屬性：

.newtohtml5::after { 
    content: url(http://lorempixel.com/25/25); 
    margin-left: 1em; 
}

JS Fiddle demo。

來源

2012-11-10 21:01:13

如果我想添加多個符合元素指定的每個類的符號 – Mahesha999

把一個符號放在h3後面或者用css括在同一行中

回答

相關問題