吹き出し風1

テキスト装飾サンプル

<p class="txt01">テキスト装飾サンプル</p>
 
p.txt01{
    font-size: 30px;
    position: relative;
    padding: 0;
    display: table;
    font-weight: bold;
    color: #E8B26B;
    margin: 0 auto;
} 

p.txt01:before {
    content: "";
    width: 30px;
    display: block;
    border-bottom: 3px dotted #E8B26B;
    position: absolute;
    left: -30px;
    top: 30px;
    transform: rotate(-125deg);
}
p.txt01:after {
    content: "";
    width: 30px;
    display: block;
    border-bottom: 3px dotted #E8B26B;
    position: absolute;
    right: -30px;
    top: 30px;
    transform: rotate(125deg);
}
WEB・Wordpressの関連記事
  • CSSで文字装飾
  • display:flexで中央寄せ、右寄せ、均等配置
  • 【DreamweaverCC】「取り消し」「やり直し」を開いてるソース内で行う
  • カスタムタクソノミ―のURLを修正する(プラグインなし)
  • カスタムフィールドの取り出し&空白チェック
  • カスタム投稿の編集画面からエディタの削除
おすすめの記事
簡単!電気代節約術
ライフハック
今年の4月から電力自由化ですね。我が家は電気代は自動引き落としなので、あまり毎月金額をチェックしていなかったのですが、電力自由化もあるし、ど...
彼氏とお花見♡手作りお弁当のポイント!
恋愛・同性・結婚
桜の季節がやってきますね!同棲するなら桜の見える部屋がいい♪などと思っていたこともありますが、なかなか見つからず。普通にお花見で桜を楽しみま...
冷蔵庫の臭いは掃除+αで徹底消臭
ライフハック
普通に使っていてもいつの間にか冷蔵庫が臭いと感じる事ありませんか? 特に臭いの強い物を入れてないのに何か変な臭いがしたり、他の食べ物になぞの...
貯金でききない男と女の特徴
恋愛・同性・結婚
同棲期間中に見極めたい事の1つ、恋人の金銭感覚。 長くお付き合いしてきいくつもりなら、しっかり貯金できる相手の方が安心ですよね。けれども「お...