吹き出し記法のUserCSS
吹き出しのようになるよ
長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。長い文章でも大丈夫。
文字のサイズも変更できる
ユニティちゃん.iconアイコンと組み合わせると
会話みたいな感じで面白いよねshinyaoguri.icon
ユニティちゃん.icon実は両方でもいける
ユニティちゃん.iconいいねshinyaoguri.icon
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
padding: 0.3em 0.5em 0.3em 0.5em;
border-radius: 0.4em;
margin: auto 0.5em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
/* 左吹き出し */
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-180%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
}
/* 右吹き出し */
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(80%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
}
/* 強調記法との組み合わせ */
.deco-\!:before, .deco-\!:after {
}
/* 吹き出し中のリンク文字色 */
.deco-\{ a, .deco-\} a {
}
hr.icon
https://gyazo.com/5498841ced434deb65feba77d5bb8752