user1040363 user1040363 - 2 months ago 14
CSS Question

Text inside element in desktop and outside in mobile

Good day I have been working in a responsive header which has a text inside an element but only in desktop screens, opening on mobile screens text should go after the element but with some formatting styles.

I'm aware "content" property doesn't support html tags so I'm running out of non-janky ideas regarding

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

I think you have to use CSS to style your element :

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