先看代码
<html>
<head>
<style type="text/css">
.demo {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
.ao, .tu {
display: inline-block;
width: 0;
font-size: 14px;
line-height: 18px;
margin: 35px;
color: #2c3dc6;
}
.tu {
direction: rtl;
}
.ao:before {
content: "love你love";
}
.tu:before {
content: "我love你";
}
.ao:before, .tu:before {
outline: 2px solid #cd0000;
/* border: 3px solid yellow; */
font-family: Consolas, Monaco, monospace;
}
</style>
</head>
<body>
<div class="demo">
<span class="ao"></span>
<span class="tu"></span>
</div>
</body>
</html>
使用outline
关键代码如下
使用 border
关键代码