css after定位

想要更好地利用 CSS 进行网页设计，你必须要熟悉 CSS 的 after 伪元素。该元素能够帮助你在无需修改 HTML 文档的情况下添加样式和内容，同时提高了页面的可维护性。 After 伪元素会在元素的内容后面添加一些内容，常常应用在清除浮动和添加图标的场合。下面便是一个样例代码：

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

以上的代码展示了一个清除浮动的技巧，其中 clearfix 是指需要清除浮动的元素的 class 名称。我们添加了一个点的 content 属性，让 after 伪元素有了内容；用 display:block 让它成为一个块级元素；height:0 则可让其不与其他内容产生冲突；clear:both 可以让浮动在 after 元素下方，最后的 visibility:hidden 可让 after 元素不占用页面实际空间。此外，在需要添加图标的场合，after 也是一个非常好用的元素。比如以下的代码：

css after定位

  link:after {
    content: url(image.png);
    height: 16px;
    width: 16px;
    display: inline-block;
  }

以上的代码便是为一个链接元素添加一个图标。我们用 content 属性来指定图标的位置，然后再通过 height 和 width 属性指定其大小，最后让其作为一个 inline-block 元素显示在链接后面。总之，CSS 的 after 元素是一个十分强大的工具。通过它，我们可以实现很多在 HTML 中难以实现的设计，同时还能大大简化代码的编写。学会使用它，必将让你的网页设计更加得心应手。

相关推荐