使用仅带边距的部分垂直线分隔div

Question

是否有可能只为包含文本的三个div设置边距？请注意,线条不如div高

https://codepen.io/anon/pen/zzRXLM

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
  font-family: Roboto, Helvetica, Arial, Sans-Serif;
}

.container {
  display: flex;
  width:600px;
  margin-top:20px;
}

.child{  
  flex: 1;
  text-align: center;
  padding:0px 15px;
  border-right: 1.2px solid #ccc;
}

<div class="container">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div>
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div>
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </div>
</div>

Answer 1

我建议使用:之后

.child{  
  flex: 1;
  text-align: center;
  padding:0px 15px;
  position:relative; /* add this */
}
.child:after {
    content: ' ';
    position: absolute;
    border-right: 1.2px solid #ccc;

    /* use one of these blocks */
    height: 80%;
    top: 10%;
    /* or 
    top:20px;
    bottom:20px;
    */
    right: 0;
}

/* use this rule if you dont want line for last div */
.child:last-child:after{
  display:none
}

https://codepen.io/FaridNaderi/pen/qjxGZd