एक छद्म स्थिति रखें: सूची आइटम के दाईं ओर तत्व के बाद

Question

मैं मेनू सूची आइटम के दाईं ओर एक छद्म :after तत्व 30 पिक्सेल को स्थान देने की कोशिश कर रहा हूं।

आइटम के पाठ की लंबाई से कोई फर्क नहीं पड़ता कि मैं तत्व को दाईं ओर 30px होना चाहता हूं।

मैंने निम्न कोड को कम से कम उस कोड को तोड़ दिया है जो मुझे लगता है कि इस मुद्दे के लिए आवश्यक है।

ध्यान दें कि यह एक मोबाइल मेनू है। मेनू और a टैग लिंक ब्राउज़र (फोन) की पूरी चौड़ाई बढ़ाता है।

आप देख सकते हैं, मैं तत्व प्राप्त करने के लिए जाने के लिए छोड़ दिया 150px को स्थित करने के लिए की जरूरत है:

#menu-main-menu-1 li { 
 
    position: relative; 
 
    list-style: none; 
 
} 
 
#menu-main-menu-1 li a { 
 
    padding: 18px 0; 
 
    display: block; 
 
    text-align: center; 
 
} 
 
#menu-main-menu-1 a:after { 
 
    content: "\25CF"; 
 
    position: absolute; 
 
    right: 0; 
 
    left: 150px; 
 
    top: 20px; 
 
}

<ul id="menu-main-menu-1"> 
 
    <li class="menu-item"> 
 
    <a href="#">Menu Item</a> 
 
    </li> 
 
    <li class="menu-item"> 
 
    <a href="#">Long Menu Item Text</a> 
 
    </li> 
 
</ul>

ऊपर कोड निम्नलिखित परिणाम पैदा करता है आइटम के दाईं ओर 30px। यह काम करता है, लेकिन मैं एक मुद्दा देख सकता हूं जहां मेनू आइटम में बहुत अधिक टेक्स्ट है, तो यह 150px से अधिक हो जाएगा और तत्व टेक्स्ट में होगा। उदाहरण के लिए:

मैं तत्व की जरूरत है कोई फर्क नहीं पड़ता लंबाई पाठ के अधिकार के लिए 30px किया जाना है। तो यह लगेगा की तरह:

यहाँ JSFiddle लिंक है: JSFiddle

कृपया ध्यान दें मैं अनावश्यक शैलियों कि इस सवाल की कार्यक्षमता को प्रभावित नहीं करते के कई छीन लिया है कि (रंग, फ़ॉन्ट्स, आदि)

किसी भी मदद की बहुत सराहना की जाएगी!

धन्यवाद

Answer 1

#menu-main-menu-1 li { 
    position: relative; 
    list-style: none; 
} 

#menu-main-menu-1 li a { 
    padding: 18px 0; 
    display: inline-block; 
    text-align: center; 

    // Recommended to recenter text 
    width: 100%; 
    margin: 0 auto; 
} 

#menu-main-menu-1 a:after { 
    content: "\25CF"; 
    padding-left: 30px; 
} 

मैं एक ब्लॉक एक इनलाइन-ब्लॉक के बजाय #menu-main-menu-1 li a बदल गया है, जिसका अर्थ है ब्लॉक पाठ लपेट चाहिए, फिर :after तत्व पैड को 30px से सही करने के लिए बदल दिया है।

क्या आप चाहते हैं कि? https://jsfiddle.net/tvfudkgt/1/

Answer 2

#menu-main-menu-1 li { 
 
    list-style: none; 
 
} 
 
.menu-item { 
 
    display: flex;    /* 1 */ 
 
    justify-content: center; /* 2 */ 
 
} 
 
.menu-item a { 
 
    margin: 0 30px;   /* 3 */ 
 
    padding: 18px 0; 
 
} 
 
.menu-item::after { 
 
    content: "\25CF"; 
 
    align-self: center;  /* 4 */ 
 
} 
 
.menu-item::before { 
 
    content: "\25CF";   /* 5 */ 
 
    visibility: hidden; 
 
}

<ul id="menu-main-menu-1"> 
 
    <li class="menu-item"> 
 
    <a href="#">Menu Item</a> 
 
    </li> 
 
    <li class="menu-item"> 
 
    <a href="#">Long Menu Item Text</a> 
 
    </li> 
 
</ul>

नोट्स:

1. फ्लेक्स कंटेनर की स्थापना (ब्लॉक स्तर; पूरी चौड़ाई लेता है)
2. Horizontally center child elements।
3. एंकर/मेनू आइटम में 30 पीएक्स क्षैतिज मार्जिन
4. राइट-साइड छद्म-तत्व लंबवत केंद्रित है और हमेशा मेनू आइटम के दाईं ओर 30px (टेक्स्ट लम्बाई के बावजूद) है।
5. बराबर शेष राशि के लिए बाईं ओर एक दूसरा छद्म-तत्व जोड़ा जाता है। यह कंटेनर में केंद्रित मेनू आइटम रखता है। यह visibility: hidden के साथ छुपा हुआ है। (more info)