html / css最大宽度不起作用

Question

So I have a tooltip on tumblr and everything about the code is working except the max width, it's stuck at 75px. I've changed it to 250px and 300px and it refuses to stretch with the words in the tooltip.

Code:

 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; } #smt-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> 

Any help is appreciated and if you need more information, let me know.

Answer 1

add width: 100%; for your pseudo element, also you can use box-sizing so that the width and height properties set the dimensions of the content rather than the content. `

 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; } #smt-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

The reason it's not working is because you have a width:100% set on the a:after pseudo-element. That property will set the width of the element to that of it's parent, in this case your a is a child of your <div class="markericon1"> . You can see that if you change just the width of <div class="markericon1"> to something higher you will get the result you want.

.markericon1 {
    width:300px;
}