用css3动画去做
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>00</title>
<style>
.xian{ width:50px height:1px background:#000000 margin-top:100px}
.xian{animation: myfirst 5s}
@keyframes myfirst
{
from {width: 50px}
to {width: 1000px}
}
</style>
</head>
<body>
<div class="xian"></div>
</body>
</html>
低版本浏览器不支持css3属性，用谷歌什么的高版本浏览器看。
可以，border style 有groove 凹槽
ridge 垄状
inset inset
outset outset
当然是用border的前提下，这几个style用其中一个即可，效果取决于颜色
不过说点多余的，你给的颜色和线条不仔细看看不出来，所以意义不大
另外的做法就是老的hr，不过现在没什么人用了，还是用别的标签做border比较灵活
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.my-para{
height:30px
line-height:30px
width:400px
display:flex
text-align:center
}
.my-para span{
height:1px
width:200px
border-bottom:1px solid #333
margin:auto
display:inline-block
}
</style>
</head>
<body>
<p class="my-para">新闻标题文字<span></span>2017.12.12</p>
</body>
</html>
如图所示：
解释：垂直居中的直线可以设置为<span></span>,span标签的父元素p标签的css属性设置为：display:flextext-align:center 设置span为块级元素，给它宽、高、下边框。 span标签的属性设置为：margin:auto 这样就可以使span的下边框垂直居中与父级元素p
