Question

我想用p标签创建一个连字符。这是要求。我成功地用边框创建它但问题是一致的。这是Fiddle。 我希望将连字号设置为中间。请帮我。我使用过这些属性

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

请尝试以下操作： Demo

您可以使用border

，而不是使用:before

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的回答之前，我也是这样做的。这是demo。但我会接受他的回答。

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

如何创建带有css的连字符以及P标签

2 个答案: