<hr />可以嵌套在样式表中

Question

我希望在浮动图像下面有一条简单的分界线。

我的样式表如下：

img.floatrightclear {
    float: right;
    clear: right;
    margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 20px;
}

图像下方是否可以显示彩色线条，图像宽度相同？它可以包含在图像css中吗？

Answer 1

在底部使用一些填充，然后仅在底部应用边框

padding-bottom:50px;
border-bottom:1px solid #ddd; /*Whatever color code you wanted the <hr> to be

https://jsfiddle.net/h57dfcmt/

Answer 2

正如Nawed Khan所说，只需使用边框底部和填充底部，如下所示：

img.floatrightclear {
  float: right;
  clear: right;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 20px;

  padding-bottom: 10px; /* the distance between bottom and line */
  border-bottom: 2px solid black; /* The line */
}