CSSでコンテンツを区切る十字の線を引きたい。

前提・実現したいこと

このように、ページ内のコンテンツを区切る十字の線を引きたいです。

現在はこのようになっています。

お手数おかけしますが、回答お待ちしております。（ ; ; ）

該当のソースコード

html
1<div class="features">
2				<ul class="col col_sp_full">
3					<li>
4						<div class="features-inner">
5							<img width="250px" src="<?php bloginfo('template_directory'); ?>/images/about/about-ico01.png">
6							<p class="features-number">01</p>
7							<h3></h3>
8							<p class="features-text"></p>
9						</div>
10					</li>
11					<li>
12						<div class="features-inner">
13							<img width="200px" src="<?php bloginfo('template_directory'); ?>/images/about/about-ico02.png">
14							<p class="features-number">02</p>
15							<h3></h3>
16							<p class="features-text"></p>
17						</div>
18					</li>
19					<li>
20						<div class="features-inner">
21							<img width="250px" src="<?php bloginfo('template_directory'); ?>/images/about/about-ico03.png">
22							<p class="features-number">03</p>
23							<h3></h3>
24							<p class="features-text"></p>
25						</div>
26					</li>
27					<li>
28						<div class="features-inner">
29							<img width="150px" src="<?php bloginfo('template_directory'); ?>/images/about/about-ico04.png">
30							<p class="features-number">04</p>
31							<h3></h3>
32							<p class="features-text"></p>
33						</div>
34					</li>
35				</ul>
36			</div>

css
1
2ul.col {
3  display: flex;
4  flex-flow: row wrap; }
5  ul.col > li {
6    flex: 0 0 50%;
7    width: 50%;
8    /* before Android4.3 iOS6:Safari */
9    max-width: 50%;
10    /* IE11*/
11    height: auto; }
12
13
14.features .features-inner {
15  text-align: center;
16  padding: 20px;
17  max-width: 450px;
18  margin: 0 auto; }
19
20.features .features-inner .features-number {
21    font-weight: bold;
22    text-align: center;
23    font-size: 2.6rem;
24    margin-top: 45px; }
25
26.features .features-inner h3 {
27    font-size: 2.6rem;
28    color: #0088c4;
29    text-align: center;
30    margin-bottom: 20px;
31    line-height: 3.6rem; }
32
33.features .features-inner .features-text {
34    text-align: left; }
35
36li:nth-child(1){
37    border-right: solid 1px #888;
38    border-bottom: solid 1px #888;}
39		
40li:nth-child(2){
41    border-bottom: solid 1px #888;}
42
43li:nth-child(3){
44    border-right: solid 1px #888;}

kei344

2019/08/11 05:46

「現在はこのようになっています。」のCSSを提示してください。

UKYO9311

2019/08/11 06:06

コメントありがとうございます！現在提示している内容が現在のCSSになります！！

kei344

2019/08/11 06:09

引かれている線に該当する記述がありません。ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

UKYO9311

2019/08/11 06:31

すみません今最新のものに修正しました！！ありがとうございます！

行動規範の内容に同意します

回答1件

ベストアンサー

面白い装飾ですね。
もう少しマシな書き方はあると思いますが、こんな感じのを追加して実装可能ではないかな、と思います。

CSS
1li{
2  position:relative;
3}
4li:nth-child(1)::before,
5li:nth-child(1)::after,
6li:nth-child(2)::after,
7li:nth-child(3)::after{
8  background-color: red;
9  content:"";
10  disblay:block;
11  position:absolute;
12}
13li:nth-child(1)::before,
14li:nth-child(2)::after{
15  width: 50px;
16  height: 1px;
17  bottom:-1px;
18}
19li:nth-child(1)::before {
20  right:-1px;
21}
22li:nth-child(2)::after {
23  left:-1px;
24}
25li:nth-child(1)::after,
26li:nth-child(3)::after{
27  height: 50px;
28  width: 1px;
29  right:-1px;
30}
31li:nth-child(1)::after {
32  bottom:-1px
33}
34li:nth-child(3)::after {
35  top:-1px
36}