デスクトップ内の要素とモバイル内の要素内のテキスト

Question

良い日私は要素内にテキストがありデスクトップ画面でしか表示されないレスポンスヘッダーで作業しています。モバイル画面で開くテキストは要素の後に置かれますが、 。

私は私が私が考える

http://codepen.io/tillegomezz/pen/rrjJxR

header { 
 
    background: #ccc; 
 
    height: 50px; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.content { 
 
    background: lightblue; 
 
} 
 
@media all and (max-width: 768px) { 
 
    header span { 
 
    display: none; 
 
    } 
 
    .content:before { 
 
    content: "<h1>Title Outside</h1>"; 
 
    } 
 
}

<div class="container"> 
 
    <header> 
 
    <span> Title Inside </span> 
 
    </header> 
 

 
    <div class="content"> 
 
    lorem ipsum foo bar so on. 
 
    </div> 
 
</div>

Answer 1

に関する非jankyアイデアを実行しているので、HTMLタグをサポートしていません注意してください "コンテンツ" プロパティよ要素をスタイルするにはCSSを使用する必要があります：

.content:before { 
    content: "Title Outside"; 
    font-weight: bold; 
    font-size: ...; 
} 

Answer 2

コードは問題ありません。ちょうどこのセクション -

@media all and (max-width: 768px) { 
header span {display: none;} 

     .content:before { 
    content: "Title Outside"; 
    } 
} 

header { 
 
    background: #ccc; 
 
    height: 50px; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    background: lightblue; 
 
    
 
} 
 

 
@media all and (max-width: 768px) { 
 
    header span {display: none;} 
 

 
     .content:before { 
 
    content: "Title Outside"; 
 
    
 
    
 
    
 
} 
 
    }

<div class="container"> 
 
    <header> 
 
    <span> Title Inside </span> 
 
    </header> 
 

 
    <div class="content"> 
 
    lorem ipsum foo bar so on. 
 
    </div> 
 
</div>