CSS3 style issue

Question

I created a tag, but have a white background after the arrow on the right.

.tags { list-style: none; margin: 0; overflow: hidden; padding: 0; } 

http://jsfiddle.net/eR8Ye/5/

How to remove a white background on the right side of a tag? The background of this tag is a gradient style.

Answer 1

You can fix it.

http://jsfiddle.net/eR8Ye/4/

• Remove the right padding from the parent
• Remove background color from ::after
• Put ::after outside the parent, to the right (use a negative value).

Answer 2

Just move the arrow to the right and make background: transparent

Fiddle

Answer 3

Change the background to :after so that it matches the background of its parent. Fiddle: http://jsfiddle.net/eR8Ye/2/

It is impossible to make it transparent.

Answer 4

You can get the desired result in 3 steps.

1 - remove the background from ::after
2 - change position ::after to -10px
3 - remove 10px right pad from tag class

Edit

As for the gradient aspect of your question, maybe you should update your script to show us exactly the problems that you have. This question here may contain the answer you need.