html css横线 箭头,HTML+CSS入门 CSS用伪类制作小箭头

本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

本文对轮播图左右按钮的处理方法一改往常，不是简单地用btn.prev+btn.next的图片代替，而是用纯css制作。

第一个是left按钮，即prev：

.vmc-arrow-left:after {

content: "\e079";

}

第二个是right按钮的，也就是next下一张的按钮：

.vmc-arrow-right:after {

content: "\e080";

}

最后是二者共同的样式代码：

.vmc-arrow-left:after, .vmc-arrow-right:after {

content: ‘‘;

display: inline-block;

font-family: ‘Glyphicons Halflings‘;

font-style: normal;

font-weight: 400;

line-height: 1;

-webkit-font-smoothing: antialiased;

font-size: 50px;

line-height: 50px;

color: white;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-shadow: 2px 2px #000;

}

首先，我觉得核心代码就是伪类中添加的那两个content内容，其次是共同样式中的font-family的作用，如果不使用这个字体，会变成一个“口”。

其余，都是样式了，可以自定义的。

注意到一点是到了共同区域还是要有空内容先放在那里的。

还是同一个网站，不同项目中，看到了font文件夹中有icomoon的字体:

，

好奇查了一下，是一种web图标字体，这样就能解释之前那个案例中，font-family的重要性的原因了。是那种字就是图标字，而content加载的序号应该就是字库中对应的那种图标字体。如下是一个小房子的图标代码：

.icon-htmleaf-home-outline:before {

content: "\e5000";

}

.htmleaf-icon:before {

margin: 0 5px;

text-transform: none;

font-weight: normal;

font-style: normal;

font-variant: normal;

font-family: ‘icomoon‘;

line-height: 1;

speak: none;

-webkit-font-smoothing: antialiased;

}

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！