html - CSS 在 2 个 div 周围有边框

Question

我正在使用带有日历扩展 (cal) 的 TYPO3。它创建事件并将它们显示为列表。目前，它看起来像这样:

现在我想在日期周围加一个边框，但要和文本一样大。

这是扩展的模板:

<div class="col-md-3 text-center" style="text-align:center;">
    <div class="event-wrapper">
        <div class="img-wrapper">
            <div class="date-wrapper">
                <div class="date" title="###MICROFORMAT_START###" class="dtstart"><span class="borderspan">###STARTDATE###</span></div>
            </div>
            <div class="image">###IMAGE###</div>
        </div>
        <div class="text-wrapper">
            <div class="time">###STARTTIME######ENDTIME###</div>
            <h3><!-- ###EVENT_LINK### start-->###TITLE###<!-- ###EVENT_LINK### end--></h3>
            <p>###DESCRIPTION###</p>
        </div>
    </div>
</div>

类为“date”的 Div 是相关部分。

此模板创建此代码:

    <div class="col-md-3 text-center" style="text-align:center">
        <div class="event-wrapper">
            <div class="img-wrapper">
                <div class="date-wrapper">
                    <div class="date" title="20170118T210000" class="dtstart"><span class="borderspan">
<div class="day">18.</div>
<div class="month">Januar</div></span>
</div>
                </div>
                <div class="image"></div>
            </div>
            <div class="text-wrapper">
                <div class="time">21:00 Uhr - 23:00 Uhr</div>
                <h3>Frankfurt/Main</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takim</p>
            </div>
        </div>
    </div>

我试图给类“borderspan”一个边框，但这没有用，之后看起来像这样:

如何在日期周围添加边框？

Answer 1

您可以像这样尝试使用 ::before 和 ::after:

.date-wrapper {
  max-width: 200px;
  background: orange;
  text-align: center;
}

.date::before,
.date::after {
  content: "";
  width: 1px;
  height: 25px;
  background: black;
  display: block;
  margin: 0 auto;
}

.date {
  margin: 25px 0;
}

<div class="date-wrapper">
  <div class="date" title="###MICROFORMAT_START###">
    <span class="borderspan">###STARTDATE###</span>
  </div>
</div>

另请注意(如@Banzay 提到的)不要对每个元素使用两次 class=""。