CSS可以自動添加文本嗎？

如果您在此鏈接檢查表單，您會看到必填字段在CSS中有class="required"，在標記中有*。CSS可以自動添加文本嗎？

可這顯示了標記的*完全用CSS具有此類的div被添加？

2011-01-12 samquo

刪除`php`標籤。這裏沒有PHP ... – polarblau 2011-01-12 21:05:45

可以使用after僞類：

，或者因爲你明確地要求與該類一個div：

div.required:after { content: "*"; }

，就可以（爲IE只因爲IE8）

當然，您可以將任何樣式應用於此。你甚至可以做這樣的事情：

div.required:after:hover { /* Hello, I'm a geek. */ }

這也可以用JavaScript實現。 jQuery的：

$(".required").append("*");

來源

2011-01-12 21:03:56

機器或以*嚴重*的方式... – 2011-01-12 23:23:55

span:after { content:"*"; }

演示：http://jsfiddle.net/W3gHU/

來源

2011-01-12 21:04:24

您可以使用此:after或before CSS僞元素，更多的信息，也ABT哪些瀏覽器支持here。

來源

2011-01-12 21:04:45 Colin

試試這個頁面：

<html> 

<style> 
.required:after { 
    color: red; 
    content: "*" 
} 
</style> 

<body> 

<div class="required">Name</div> <input type="text"> 
<div class="required">Email</div> <input type="text"> 

</body> 

</html>

：是：之後被除IE（希望IE9將支持）可能一切

更新考慮到森達維達斯的帳戶評論瞭解只是使用的例子。當然，這會帶來更多的意義，如果我們做出這樣說：

.required:before { 
    color: red; 
    content: "*" 
} 
.... 
<div>Name <input type="text" class="required"> </div>

那麼我們甚至可以添加不顯眼的JavaScript驗證該字段（所以這種方式帶來了良好的優勢）。問題是，這個重構頁面將會顯示，因爲我們只希望它在Opera中（我檢查了所有瀏覽器的最新版本，除了FireFox 4，但我不確定FF會改變他們考慮這種風格的方式）。
：之後和：之前不工作的輸入和img元素; there is相關的討論爲什麼。 $（「。required」）.jquery之前的（「*」）可以在任何地方工作，但這更多的是關於JavaScript和CSS（之前被其他人提到）。

來源

2011-01-12 21:06:30 Maxym

如果您將INPUT元素放入DIV內，這會更有意義。 – 2011-01-12 21:37:29

您可以通過CSS添加恆星圖像。這應該適用於所有瀏覽器。

.required 
{ 
background-image:url(/path/to/your/images/dir/required-field.png); 
background-position:top right; 
background-repeat:no-repeat; 
padding-right:10px; 
}

來源

2011-01-12 21:07:02

CSS可以自動添加文本嗎？

回答

相關問題