:after and :before not working on mobile browsers

Question

Im trying to make a header with a special shape for the mobile browser.
I got what i wanted on my pc using the :before and :after to get the triangular shapes. Though it looks awesome in a pc browser.. so far only the chrome browser on my Samsung Galaxy s2 and s4 gave the desired effect. Even the standard browsers from samsung failed.
I also tested it on an iphone s4 with no succes in safari aswell as chrome.

On all the pages i find on the support for these pseudo selectors, they state there is support in every browser but my testing says otherwise.

My question is, is there no support or is my code wrong?

here is a link to a simple page with the code that i set up. http://foodlogg.net76.net/pseudo.html

*{
  margin: 0px;
  padding: 0px;
}
.top {
  background-color:#e50000;
  height:20px;
  width: 93vw;
  text-align: left;
  padding: 5px 0px;
}
.top:before {
  content: '';
  width: 0;
  height: 0;
  border-bottom: 20px solid transparent;
  border-left: 93vw solid #e50000;
  position: absolute;
  left: 0px;
  top: 30px;
}
.top:after{
  content: '';
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 7vw solid #e50000;
  position: absolute;
  right: 0px;
  top: 0px;
}

Hope you guys can help me with this.

Getting an error when trying the shortened link "this goo.gl shortlink has been disabled. It was found to be violating our Terms of Service. Click here and here for more information about our terms and policies respectively" — Vall3y, Nov 17 '14 at 22:35
Note that you should now be using a double colon instead of a single one: https://developer.mozilla.org/en-US/docs/Web/CSS/::before — Rob, Nov 17 '14 at 22:45
Don't obfuscate your URLs; link *directly to the relevant page*. — David Thomas, Nov 17 '14 at 22:48
link has been updated @Rob i did use them in my original code, just didn't include it in the snippet i posted in the question here. it is used on the linked page — gijs botje, Nov 17 '14 at 23:00
anybody? here is a link to the full website it is used on: [avtest.coccographics.nl](http://avtest.coccographics.nl) — gijs botje, Nov 22 '14 at 16:45

score 1 · Answer 1 · edited Jun 23 '15 at 10:15

1

This issue was not concerning pseudo elements.

It's about CSS3 relative sizing with vw. Your pseudo elements had rather width or border width of the styled parts given in vw. That's why the mobile browsers stucked.

Android (like on your Galaxies) just supports this from 4.4 upwards.

edited Jun 23 '15 at 10:15

Robert

5,278
43
65
115

answered Jun 23 '15 at 09:48

Simon Kraus

736
4
14

score 1 · Answer 2 · answered Oct 21 '19 at 03:52

1

You can try this: add arrtibute display: table-cell in class .top:after and .top:before. I think it success.

answered Oct 21 '19 at 03:52

Huynh Thai Hung

91
1
3

:after and :before not working on mobile browsers

2 Answers2