：內容之前沒有邊框

Question

我想取消邊框旁邊的彩色文字EXAMPLE。我試圖設置border: none，但它不起作用。這裏有一些解決方法嗎？ 這裏是我的代碼：

div.example { 
 
    font-size: 1em; 
 
    /*letter-spacing: 0.05em; 
 
\t line-height: 1.5em;*/ 
 
    border: 0px; 
 
    border-left: 4px solid #64c6ed; 
 
    padding: 5px 5px 5px 8px; 
 
    margin-bottom: 15px; 
 
} 
 

 
div.example::before { 
 
    content: 'Example'; 
 
    color: #64c6ed; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    /*line-height: 1em; 
 
\t letter-spacing: 0.3em;*/ 
 
    border: 0px none !important; 
 
}

<div class="example"> 
 
    <p>Popis položek, který je uveden u mzdových listů souhrnných (MLS), může vypadat např. takto:<br />&#160; 
 
    <table class="B1-P4"> 
 
     <tr> 
 
     <th class="seda">Název</th> 
 
     <th class="seda">Popis </th> 
 
     </tr> 
 
     <tr> 
 
     <td class="seda">SP základ celkem<br /><span class="FieldName">S_SocialInsBase</span></td> 
 
     <td class="seda">Počítaná položka. Celkový základ SP vypočtený ze základů SP pro jednotlivé prac. poměry daného zaměstnance <i>(MLD:S_SocialInsBaseCorrect)</i>......atd.</td> 
 
     </tr> 
 
    </table> 
 
    <p>Tj. na nějakém vstupním formuláři souhrnného mzdového listu je položka "SP základ celkem". V programu je definována pod názvem <i>S_SocialInsBase</i> (a pod tímto názvem ji lze i vyhledat v programu i v helpu). Popis se odkazuje na položku dílčího 
 
     mzdového listu "Základ SP" <i>(S_SocialInsBaseCorrect)</i>. Jelikož se jedná o položku jiné agendy (jiného Business objektu), je uvedena i její zkratka, aby nedošlo k záměně, tj. <i>(MLD:S_SocialInsBaseCorrect)</i>.</p> 
 
</div>

Answer 1

邊界是.example DIV的一部分，你不能改變僞元素中刪除。您可以通過使用position: absolute放置::before元素的div外：

div.example { 
 
    position: relative; 
 
    font-size: 1em; 
 
    /*letter-spacing: 0.05em; 
 
\t line-height: 1.5em;*/ 
 
    border: 0px; 
 
    border-left: 4px solid #64c6ed; 
 
    padding: 0 5px 5px 8px; 
 
    margin: 25px 0 15px; 
 
} 
 

 
div.example::before { 
 
    position: absolute; 
 
    top: -20px; 
 
    content: 'Example'; 
 
    color: #64c6ed; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    /*line-height: 1em; 
 
\t letter-spacing: 0.3em;*/ 
 
    border: 0px none !important; 
 
}

<div class="example"> 
 
    <p>Popis položek, který je uveden u mzdových listů souhrnných (MLS), může vypadat např. takto: 
 
    <br />&#160; 
 
    <table class="B1-P4"> 
 
     <tr> 
 
     <th class="seda">Název</th> 
 
     <th class="seda">Popis </th> 
 
     </tr> 
 
     <tr> 
 
     <td class="seda">SP základ celkem 
 
      <br /><span class="FieldName">S_SocialInsBase</span></td> 
 
     <td class="seda">Počítaná položka. Celkový základ SP vypočtený ze základů SP pro jednotlivé prac. poměry daného zaměstnance <i>(MLD:S_SocialInsBaseCorrect)</i>......atd.</td> 
 
     </tr> 
 
    </table> 
 
    <p>Tj. na nějakém vstupním formuláři souhrnného mzdového listu je položka "SP základ celkem". V programu je definována pod názvem <i>S_SocialInsBase</i> (a pod tímto názvem ji lze i vyhledat v programu i v helpu). Popis se odkazuje na položku dílčího 
 
     mzdového listu "Základ SP" <i>(S_SocialInsBaseCorrect)</i>. Jelikož se jedná o položku jiné agendy (jiného Business objektu), je uvedena i její zkratka, aby nedošlo k záměně, tj. <i>(MLD:S_SocialInsBaseCorrect)</i>.</p> 
 
</div>

Answer 2

我嘗試添加position:absolute這使得它搬出其格邊界。

div.example 
 
{ 
 
    font-size: 1em; 
 
    border: 0px; 
 
    border-left: 4px solid #64c6ed; 
 
    padding: 5px 5px 5px 8px; 
 
    margin-bottom: 15px; 
 
    margin-top: 40px; 
 
    position: relative; 
 
} 
 

 
div.example::before 
 
{ 
 
    content: 'Example'; 
 
    color: #64c6ed; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    border: 0px none !important; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    left: 0; 
 
}

<div class="example"> 
 
                <p>Popis položek, který je uveden u mzdových listů souhrnných (MLS), může vypadat např. takto:<br />&#160;<table class="B1-P4"><tr><th class="seda">Název</th><th class="seda">Popis </th></tr><tr><td class="seda">SP základ celkem<br /><span class="FieldName">S_SocialInsBase</span></td><td class="seda">Počítaná položka. Celkový základ SP vypočtený ze základů SP pro jednotlivé prac. poměry daného zaměstnance <i>(MLD:S_SocialInsBaseCorrect)</i>......atd.</td></tr></table><p>Tj. na nějakém vstupním formuláři souhrnného mzdového listu je položka "SP základ celkem". V programu je definována pod názvem <i>S_SocialInsBase</i> (a pod tímto názvem ji lze i vyhledat v programu i v helpu). Popis se odkazuje na položku dílčího mzdového listu "Základ SP" <i>(S_SocialInsBaseCorrect)</i>. Jelikož se jedná o položku jiné agendy (jiného Business objektu), je uvedena i její zkratka, aby nedošlo k záměně, tj. <i>(MLD:S_SocialInsBaseCorrect)</i>.</p> 
 
               </div>

Answer 3

你需要把文本.example類之外。

請在[**堆棧片段最好檢查以下

div.example 
 
{ 
 
\t font-size: 1em; 
 
\t /*letter-spacing: 0.05em; 
 
\t line-height: 1.5em;*/ 
 
\t border: 0px; 
 
\t border-left: 4px solid #64c6ed; 
 
\t padding: 5px 5px 5px 8px; 
 
\t margin-bottom: 15px; 
 
} 
 

 
h3 
 
{ 
 
\t color: #64c6ed; 
 
\t font-weight: bold; 
 
\t text-transform: uppercase; 
 
\t /*line-height: 1em; 
 
\t letter-spacing: 0.3em;*/ 
 
    margin-left: 20px; 
 
}

<h3>EXAMPLE</h3> 
 
<div class="example"> 
 
    <p>Popis položek, který je uveden u mzdových listů souhrnných (MLS), může vypadat např. takto:<br />&#160;<table class="B1-P4"><tr><th class="seda">Název</th><th class="seda">Popis </th></tr><tr><td class="seda">SP základ celkem<br /><span class="FieldName">S_SocialInsBase</span></td><td class="seda">Počítaná položka. Celkový základ SP vypočtený ze základů SP pro jednotlivé prac. poměry daného zaměstnance <i>(MLD:S_SocialInsBaseCorrect)</i>......atd.</td></tr></table><p>Tj. na nějakém vstupním formuláři souhrnného mzdového listu je položka "SP základ celkem". V programu je definována pod názvem <i>S_SocialInsBase</i> (a pod tímto názvem ji lze i vyhledat v programu i v helpu). Popis se odkazuje na položku dílčího mzdového listu "Základ SP" <i>(S_SocialInsBaseCorrect)</i>. Jelikož se jedná o položku jiné agendy (jiného Business objektu), je uvedena i její zkratka, aby nedošlo k záměně, tj. <i>(MLD:S_SocialInsBaseCorrect)</i>.</p> 
 
</div>