我如何创建一个连字符符号与css只与P标签一起

Question

我想用p标记创建一个连字符符号。这是需求。我成功地用边界创建了它，但问题是对齐。这是小提琴。我想要中间的连字符符号。请帮帮我。我已经使用了这些属性

border-left: 2px solid;
height: 3px;
border-width: 11px;

p {
    display: inline-block;
}
.middle-arrow
{
    border-left: 2px solid;
    height: 3px;
    border-width: 11px;
}

<p>25 july,2014</p>
<p class="middle-arrow">25 july,2015</p>

Answer 1

试试这样:演示

你可以用:before

代替border

p.middle-arrow:before
{
    content:"-";
    font-size:20px;
    padding:0 5px; /* use padding if you need space in between 2 <p> tags
}

Answer 2

在@ g.l.之前我也是这么做的。P的答案是这个。下面是演示。但我接受他的回答。

.middle-arrow:before {
    border-left: 2px solid;
    height: 3px;
    border-width: 11px;
    display: inline-block;
    content: "";
    vertical-align: top;
    position: relative;
    top: 7px;
}