html/css max-width not working

Question

だから私はtumblrのツールチップを持っていて、コードのすべてが最大幅を除いて動作しています、それは75pxで止まっています。私はそれを250pxと300pxに変更しました。そして、それはツールチップの言葉で伸ばすことを拒否します。

コード：

a[tooltip]:hover:after { 
 
    position: absolute; 
 
    z-index: 99999999; 
 
    max-width: 300px; 
 
    min-width: 60px; 
 
    border: 1px solid #bababa; 
 
    padding: 6px; 
 
    margin: -27px 0px 0px 28px; 
 
    background-color: #ffffff; 
 
    color: #1a2242; 
 
    font-family: arial; 
 
    font-size: 7px; 
 
    line-height: 12px; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    font-weight: none; 
 
    text-align: center; 
 
    box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px; 
 
    opacity: 1; 
 
    content: attr(tooltip); 
 
    transition-duration: 0.6s; 
 
    -moz-transition-duration: 0.6s; 
 
    -webkit-transition-duration: 0.6s; 
 
    -o-transition-duration: 0.6s; 
 
} 
 

 
#s-m-t-tooltip { 
 
    position: absolute; 
 
    z-index: 99999999; 
 
    max-width: 300px; 
 
    min-width: 60px; 
 
    border: 1px solid #bababa; 
 
    padding: 6px; 
 
    margin: -27px 0px 0px 28px; 
 
    background-color: #ffffff; 
 
    color: #1a2242; 
 
    font-family: arial; 
 
    font-size: 7px; 
 
    line-height: 12px; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    font-weight: none; 
 
    text-align: center; 
 
    box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px; 
 
    opacity: 1; 
 
    outline: 0px solid #ddd; 
 
    -moz-transition-duration: 0.3s; 
 
    -webkit-transition-duration: 0.3s; 
 
    -o-transition-duration: 0.3s; 
 
}

<a href="#popup3" tooltip="words">Link</a>

すべてのヘルプは大歓迎、あなたはより多くの情報が必要な場合、私に知らせています。

Answer 1

width: 100%;を擬似要素に追加する場合は、box-sizingを使用して、widthプロパティとheightプロパティでコンテンツではなくコンテンツのサイズを設定することもできます。 `

a[tooltip]:hover:after { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    z-index: 99999999; 
 
    max-width: 300px; 
 
    min-width: 60px; 
 
    border: 1px solid #bababa; 
 
    padding: 6px; 
 
    margin: -5px 0 0 28px; 
 
    background-color: #ffffff; 
 
    color: #1a2242; 
 
    font-family: arial; 
 
    font-size: 7px; 
 
    line-height: 12px; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    font-weight: none; 
 
    text-align: center; 
 
    box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px; 
 
    opacity: 1; 
 
    content: attr(tooltip); 
 
    transition-duration: 0.6s; 
 
    -moz-transition-duration: 0.6s; 
 
    -webkit-transition-duration: 0.6s; 
 
    -o-transition-duration: 0.6s; 
 
} 
 

 
#s-m-t-tooltip { 
 
    position: absolute; 
 
    z-index: 99999999; 
 
    width: 300px; 
 
    max-width: 200px; 
 
    min-width: 60px; 
 
    border: 1px solid #bababa; 
 
    padding: 6px; 
 
    margin: -27 0 0 28px; 
 
    background-color: #ffffff; 
 
    color: #1a2242; 
 
    font-family: arial; 
 
    font-size: 7px; 
 
    line-height: 12px; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    font-weight: none; 
 
    text-align: center; 
 
    box-shadow: rgba(0, 0, 0, 0.04)0 2px 4px; 
 
    opacity: 1; 
 
    outline: 0px solid #ddd; 
 
    -moz-transition-duration: 0.3s; 
 
    -webkit-transition-duration: 0.3s; 
 
    -o-transition-duration: 0.3s; 
 
}

<a href="#popup3" tooltip="words hooha haooo ahhahhhah ahahhahhah ahahhahaha hahahhahha ahahahhahha ahahhaha">Link</a>

Answer 2

あなたはa:after擬似要素にwidth:100%セットを持っているので、それは働いていない理由があります。そのプロパティは要素の幅を親の幅に設定します。この場合、aは<div class="markericon1">の子です。 <div class="markericon1">の幅だけをもっと高くすると、結果が得られることが分かります。

.markericon1 { 
    width:300px; 
}