User stylesheet declaration for button overwrites custom CSS

Question

I want to insert a line break after the third button in the snippet below. I found this trick and wanted to use it but it doesn't work because my button doesn't accept display: inline and keeps the user agent style of display: inline-block no matter what (no important and no more and more specific selector will help). Does anyone know why this is? If I instead use the trick on the a tag, it works perfectly fine.

I know I could do the line-break as well with Flexbox if I would insert a div but I can't easily change the markup.

.wrap .button-third {
    display: inline;
}

.button-third:after {
  content: "\a";
  white-space: pre;
}
/*

.first-link {
    display: inline;
}
.first-link:after {
    content: "\a";
    white-space: pre;
}
 */

<div class="wrap">
  <button class="button-first"> Button 1</button>
  <button class="button-second">Button 2</button>
  <button class="button-third">Button 3</button>
      
  <a href="" class="first-link">Link 1</a>
  <a href="" class="second-link">Link 2</a>
</div>

MrJami · Answer 1 · 2021-01-28T17:34:33.733

0

Use instead of button, input type button.

.wrap .button-third {
    display: block;
}

.button-third:after {
  content: "\a";
  white-space: pre;
}
/*

.first-link {
    display: inline;
}
.first-link:after {
    content: "\a";
    white-space: pre;
}
 */

<div class="wrap">
  <input type='button' class="button-first" value='Button 1'>
  <input type='button' class="button-second" value='Button 2'>
  <input type='button' class="button-third" value='Button 3'>
      
  <a href="" class="first-link">Link 1</a>
  <a href="" class="second-link">Link 2</a>
</div>

edited Jan 28 '21 at 17:34

answered Jan 28 '21 at 17:12

MrJami

685
4
16

Thank you for your suggestion. I just tried it and unfortunately the issue still remains. Also this would require me to change the markup as well. – marlisa Jan 28 '21 at 17:29
@marlisa check my answer, is this what you want to achieve? – MrJami Jan 28 '21 at 17:35
No, I would like to have the button 3 still on the same line as buttons 1 and 2 and the line break after button 3. I think `display: block` won't help me with this. Thanks for the suggestion, though! – marlisa Jan 28 '21 at 22:12

marlisa · Answer 2 · 2021-01-29T08:42:31.780

Fixed it now by adding the line break with a before on the first link. Achieves the same result. I wonder why I didn't see this most simple solution before! I'd however still be interested if someone knows why the user agent stylesheet overwrites my declaration.

.wrap .first-link {
    display: inline;
}

.first-link:before {
  content: "\a";
  white-space: pre;
}

<div class="wrap">
  <button class="button-first"> Button 1</button>
  <button class="button-second">Button 2</button>
  <button class="button-third">Button 3</button>
      
  <a href="" class="first-link">Link 1</a>
  <a href="" class="second-link">Link 2</a>
</div>

User stylesheet declaration for button overwrites custom CSS

2 Answers2