CSS
.hosoku{
position: relative;
display:inline-block;
background: -webkit-linear-gradient(#F8c884 , #F4A460);
background: linear-gradient(#F8c884 , #F4A460);
border: 1px solid #F8c884;
border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
color: #444;
font-size:0.8em;
padding: 0.5em 1em;
margin: 2em 0;
text-decoration: none;
}
.hosoku::before{
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
content: '';
border: 2px dashed #fff;
border-radius: .4em 2em .5em 3em/3em .5em 2em .5em;
}
.hosoku a{position:relative;}
HTML
<div class="hosoku"> <a href="https://〇〇〇/□□□">リンク</a>を読んでください。 </div>このように記述しているのですが、「リンクを読んでください。」の文字サイズが0.8emになっていないようです。<body>タグ内の通常の文字サイズと同じになっています。
.hosoku a{position:relative;}
を書き加える前は0.8emが反映されていました。そのかわり、リンクをクリックできないという不具合がありました。
回答1件
あなたの回答
tips
プレビュー