content



значения свойства:


  • none
  • normal
  • counter
  • attr(attribute)
  • "string"
  • open-quote
  • close-quote
  • no-open-quote
  • no-close-quote
  • url(url)
  • inherit



css/style.css
  • * {
  •  margin: 0;
  •  padding: 0;
  • }
  •  
  • .main {
  •  height: 600px;
  •  width: 900px;
  •  position: absolute;
  •  top: 50%;
  •  left: 50%;
  •  margin-top: -300px;
  •  margin-left: -450px;
  • }
  •  
  • .wrapper {
  •  width: 100%;
  •  height: 33.3%;
  •  float: left;
  • }
  •  
  • #div1, #div2, #div3 {
  •  height: 150px;
  •  width: 800px;
  •  float: left;
  •  position: relative;
  •  top: 50%;
  •  left: 50%;
  •  margin-top: -75px;
  •  margin-left: -400px;
  •  border: 1px solid;
  • }
  •  
  • #div1, #div2, #div3 p {
  •  text-align: center;
  •  line-height: 150px;
  •  font-size: 24px;
  • }
  •  
  • #div1 p:before {
  •  content: "english - ";
  • }
  •  
  • #div1 p:after {
  •  content: " - translate - Привет Мир!";
  • }
  •  
  • #div2 p:before {
  •  content: "english - ";
  • }
  •  
  • #div2 p:after {
  •  content: " - translate - Быть или не быть?";
  • }
  •  
  • #div3 p:before {
  •  content: "russian - ";
  • }
  •  
  • #div3 p:after {
  •  content: " - translate - To be or not to be?";
  • }
* {
 margin: 0;
 padding: 0;
}

.main {
 height: 600px;
 width: 900px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -300px;
 margin-left: -450px;
}

.wrapper {
 width: 100%;
 height: 33.3%;
 float: left;
}

#div1, #div2, #div3 {
 height: 150px;
 width: 800px;
 float: left;
 position: relative;
 top: 50%;
 left: 50%;
 margin-top: -75px;
 margin-left: -400px;
 border: 1px solid;
}

#div1, #div2, #div3 p {
 text-align: center;
 line-height: 150px;
 font-size: 24px;
}

#div1 p:before {
 content: "english - ";
}

#div1 p:after {
 content: " - translate - Привет Мир!";
}

#div2 p:before {
 content: "english - ";
}

#div2 p:after {
 content: " - translate - Быть или не быть?";
}

#div3 p:before {
 content: "russian - ";
}

#div3 p:after {
 content: " - translate - To be or not to be?";
}


index.html
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  • </head>
  • <body>
  •  <div class="main">
  •   <div class="wrapper">
  •    <div id="div1">
  •     <p>Hello World!</p>
  •    </div>
  •   </div>
  •   <div class="wrapper">
  •    <div id="div2">
  •     <p>To be or not to be?</p>
  •    </div>
  •   </div>
  •   <div class="wrapper">
  •    <div id="div3">
  •     <p>Привет Мир!</p>
  •    </div>
  •   </div>
  •  </div>
  • </body>
  • </html>
  • <!DOCTYPE html>
  • <html>
  • <head>
  •  <meta charset="utf-8" />
  •  <title>New Page</title>
  •  <link href="css/style.css" rel="stylesheet" />
  • </head>
  • <body>
  •  <div class="main">
  •   <div class="wrapper">
  •    <div id="div1">
  •     <p>Hello World!</p>
  •    </div>
  •   </div>
  •   <div class="wrapper">
  •    <div id="div2">
  •     <p>To be or not to be?</p>
  •    </div>
  •   </div>
  •   <div class="wrapper">
  •    <div id="div3">
  •     <p>Привет Мир!</p>
  •    </div>
  •   </div>
  •  </div>
  • </body>
  • </html>