E:before E:after 插入图像

来源：互联网发布：树莓派3安装ubuntu 编辑：程序博客网时间：2024/06/05 22:54

概述

使用E:before E:after 伪元素选择器，在元素中插入文字，图像、、、

插入图像方法：
例如: 在 <p>元素中插入path路径的图像

p:before{    content:url(path);}

例子

<html><head><style>li:before{    content:url(pic1.gif);    width:1px;    height:1px;}li.tj:after{    content:url(pic2.gif);}</style></head><body><ul>    <li class="tj"><a href="#">阿兰·德波顿 《幸福的建筑》</li>    <li class="tj"><a href="#">北京遇上西雅图.</li>    <li class="tj"><a href="#">东京爱情故事</li>    <li><a href="#">中国 年</li>    <li>春风十里一碗面</li></ul><body></html>

页面效果

阿兰·德波顿《幸福的建筑》
北京遇上西雅图.
东京爱情故事
中国年
春风十里一碗面

素材

pic1.gif
pic2.gif

xixi
2017-1-17 学校的桃花开了，南方的花开得早，月雅湖的野鸭子躲在窝里不肯出来。

0 0