Question

我尝试创建输入，其中包含border-bottom和小（高）边框： Example 但是这段代码不起作用：

input:before, input:after {
    display: block;
    height: 5px;
    width: 1px;
    background: #f00;
}

Answer 1

问题是::after伪元素将伪元素放在您选择的元素中，因此输入不能有::before或::after。

其次，伪元素通常需要content:" ";

这是一个工作示例

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.input input {
    font-size:20px;
}
.input {
    border:none;
    display:inline-block;
    border-bottom:solid red 1px;
}
.input:before, .input:after {
    content:" ";
    display: inline-block;
    vertical-align:bottom;
    height: 5px;
    width: 1px;
    background: #f00;
}
</style>
</head>
<body>
<div class="input">
<input value="Text" />
</div>
</body>
</html>

Answer 2

所以这是我的例子：

span {
  display:inline-block;
  border-bottom:red solid 1px;
  position:relative;
}
span:before, span:after {
  content:'';
  position:absolute;
  bottom:-1px ;
  height:10px;
  border-left:solid red 1px;
}

<span><input/></span>

在此处查看http://codepen.io/gc-nomade/pen/bfDwy

Answer 3

你也可以通过边框css设置这个：

border-bottom: red thin solid;
width: 100px;
border-left: thin solid red;
border-right: red thin solid;
height: 20px;
text-align: center;

CSS：之前的小行

3 个答案: