css下划线环绕图片

CSS是网页设计中不可或缺的一部分，它能够实现许多网页特效，其中在文字下划线环绕图片的应用，可以使网站设计更为独特。本文将为大家介绍如何使用CSS实现下划线环绕图片效果。

/* HTML代码 */
<p>这是一张图片<img src="image.jpg" alt="我的图片"> 测试文字测试文字测试文字测试文字测试文字</p>

/* CSS代码 */
p {
  position: relative;
  padding-bottom: 20px; /*设置下方留白，使下划线能够环绕图片*/
  display: inline-block; /*将p标签设置为行内块级元素，使它能够环绕图片*/
}

p::after {
  content: "";
  position: absolute;
  bottom: 0; /*设置下划线位置*/
  left: 0; /*设置下划线起点位置*/
  width: 100%; /*设置下划线长度为100%*/
  height: 1px; /*设置下划线高度*/
  background-color: black; /*设置下划线颜色*/
  z-index: -1; /*将下划线设置在p标签后面*/
}

img {
  position: relative;
  vertical-align: middle; /*将图片垂直居中*/
  z-index: 1; /*将图片置于p标签上方*/
} 

对于上面的CSS代码，我们首先将p标签设置为相对定位，再将下面的伪元素设置为绝对定位，并通过bottom和left属性来定位下划线的位置。接着，设置下划线的宽度、高度和颜色。最后，通过z-index来调整图片和下划线的层级关系。

值得注意的是，我们将p标签设置为行内块级元素，原因是p标签默认为块级元素，这样会导致下划线不会环绕图片，而是占满一行。而行内块级元素能够完美地将下划线环绕在图片周围。同时，下方留白的设置也是非常关键的，它能够保持下划线的长度，使其能够环绕整张图片。

在实际应用中，我们可以根据需要调整下划线的颜色、高度、宽度和起点位置，实现不同风格的下划线环绕图片效果。CSS下划线环绕图片效果简单易用，非常适合在网页设计中使用。