我正在尝试找出是否有更优雅的方法来创建以下 HTML 按钮。
我目前正在使用 <a href="...">
创建它和 2 个 child <span>
元素如下:-
<a href="">
<span class="box_button">Read more</span>
<span class="box_button_arrow">></span>
</a>
CSS 如下所示:-
span.box_button {
display: block;
float: left;
padding: 6px 10px 8px 10px;
border: 4px solid white;
color: white;
}
span.box_button_arrow {
display: block;
float: left;
color: white;
padding: 6px 10px 8px 10px;
border-top: 4px solid white;
border-right: 4px solid white;
border-bottom: 4px solid white;
}
请注意箭头跨度在其左侧没有边框。
这是密码笔 - http://codepen.io/bobmarksie/pen/bEPVgM
是否可以用单个 HTML 元素替换 2 个 span?
最佳答案
您可以使用 ::after
来执行此操作。使用此解决方案,您可以删除 span
元素。这是您更新的示例:
div.info_box {
float: left;
width: 230px;
height: 230px;
padding: 40px;
background: #A95563;
color: white;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
div.box_title {
font-size: 22px;
padding: 0px 0px 20px 0px;
}
div.box_main {
font-size: 16px;
line-height: 120%;
height: 120px;
}
a.box_button {
border:4px solid #fff;
color:#fff;
display:inline;
padding:6px 10px 8px 10px;
text-decoration:none;
}
a.box_button::after {
border-left:4px solid #fff;
content:">";
margin-left:10px;
padding:6px 0px 8px 10px;
}
<div class="info_box">
<div class="box_title">My title</div>
<div class="box_main">The quick brown fox jumps over the lazy dog</div>
<a class="box_button" href="">Read more</a>
</div>
您可以在这里找到可用的代码笔:http://codepen.io/anon/pen/JGQYyG
关于html - 更优雅的创建按钮的方式,例如使用单个 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35529912/