before afterタグで『』カギカッコなどの記号【】をCSSで表現する

【拡大する】などのアンカー付きの文章に対して出来れば【】なしでCSSのみで装飾したい場合、cssのcontentタグです。

<span class=”kakko”>拡大する</span>

 

.kakko {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left:1em;
}
.kakko::before,
.kakko::after {
position: absolute;
content: ”;
width: 20px;
height: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kakko::before {
top: 0;
left: 0;
content:”【”;
}
.kakko::after {
top: 0;
left: 5em;
content:”】”;
}