# جعل العلامات تبدو مثل العلامات في العالم الحقيقي

**URL:** <https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237>\
**Category:** UX\
**Created:** [23 أكتوبر 2018، 7:40ص UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237 "2018-10-23T07:40:38Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![terraboss](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/terraboss/32/579307_2.png) [@terraboss](https://meta.discourse.org/u/terraboss)\
**Post date:** [23 أكتوبر 2018، 5:36م UTC](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237/4 "2018-10-23T17:36:03Z")

</div>

Nice CSS code snippet 🙂 Thanks!

I experienced a minor issue with my css code: Not sure why, but with Safari and Chrome (!) …

- … on my iPhone 8+, all of the tags have a thin line on the right next to the flap.
- .. on my iPad mini 4, only some thin lines will appear on the right next to the flap. (e.g. tags with 2 characters)
- … on my Mac everything is just fine

It seems, the “after” css container is repeating itself. How can I fix this?

I made them a litte bit thinner … ![03](https://global.discourse-cdn.com/meta/original/3X/2/5/2554b0643271d1a6e1b369731f22c9b17ff454d4.png)

> **See CSS Code**
>
> ```
> .discourse-tag.box {
> position: relative;
> display: inline-block;
> text-decoration: none;
> font-weight: normal;
> background-color: #e28a54 !important;
> border-radius: 3px 0 0 3px;
> height: 20px;
> line-height: 20px;
> padding: 0 13px 0 21px;
> margin: 0 10px 0 0;
> }
> .discourse-tag.box::before {
> position: absolute;
> content: '';
> background: #ffffff;
> border-radius: 100%;
> height: 6px; 
> left: 7px;
> width: 6px;
> top: 7px;
> box-shadow: inset 0 1px rgba(0,0,0,0.25);
> }
> .discourse-tags .discourse-tag.box::after {
> position: absolute;
> content: '';
> background: white;
> border-bottom: 11px solid transparent;
> border-left: 10px solid #e28a54;
> border-top: 10px solid transparent;
> right: 0;
> top: 0;
> 
> }
> a.discourse-tag.box {
> color: #fff !important;
> }
> 
> ```

---

_[View the full topic](https://meta.discourse.org/t/making-tags-look-like-real-world-tags/100237)._