css after和before選擇器使用程式碼例項

antzone發表於2017-04-05
CSS

下面分享一個關於after和before偽物件選擇器使用的程式碼例項。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.tip{
  padding:5px 10px; 
  margin-left:15px; 
  border:1px solid #F8D19F; 
  border-radius:3px; 
  background-color:#FDFBB8; 
  color:#D07807; 
  font-size:12px; 
  position:absolute;
}
.tip:before,  .tip:after{
  content:attr(data-content); 
  font-family:xms; 
  position:absolute; 
  top:6px;
}
.tip:before, .tip before{
  color:#F8D19F; 
  left:-10px;
}
.tip:after, .tip after{
  color:#FDFBB8; 
  left:-8px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<img src="demo/CSS/img/F22.jpg" />
<span id="tip" class="tip" data-content="◀">螞蟻部落歡迎您</span>
</body>
</html>

上面的程式碼實現了再矩形一側形成一個小箭頭的功能，也就是帶有箭頭的tip效果。

相關文章