|
「HTML+CSS」--自定义按钮样式【002】 实现两条线的延展中间的文字使用span标签，需要使用span标签的伪类上下两条线利用span的伪类::before::after实现，原理类似左右两边的直线其实与上一篇文章实现的原理是一样的，只是线条的位置和方向有所变化
，其他基本没有什么变化「HTML+CSS」--自定义按钮样式【001】Demo代码HTML Document Haihong Pro CSShtml,body{ margin: 0; height: 100%
，这里button的两个伪类::before和::after的位置有所变化，分别位于左下和右上初始width都为1px，height为0注：这里为了演示，将widthheigth都设置为了10px，背景色为红色
然后鼠标停留时，利用过渡transition，将height设置为100%，就可以实现左右两条线的效果了?上下两条直线就是利用span的两个伪元素实现的，原理也是一样的，这里就不再赘述了。
踩坑1.忘了将span的position设置为relative2.没有记得将display设置为block因为span不是块级元素，这里需要的是块级元素，如果没有声明为块级元素，就会出现下面的结果： ? 21330
|