cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              Some lines next to the titles
==============

I am a title with lines at each side
--------------------
<div class="floatLeft">just floatin'...</div>

**This is an attempt to make titles with lines. The challenge here is to _not_ put extra DOM element. To keep the markup dry, I use Markdown.**
I'd just put some div to make the page a little bit less boring !

I have only one line on the right
----------------------
Σεα σεμπερ ιυδισαβιτ νο, ραθιονιβυς περσεκυερις ιντελλεγεβαθ περ θε. Λυδυς απειριαν ινδοστυμ εως ει. Περ πυθενθ σεμπερ φολυπθυα εξ. Σωνσυλ σονσεκυυντυρ νεσεσιταθιβυς ιν μει. Κυι πορρω σαυσαε ατ. Ευ μινιμυμ ερροριβυς κυο, αδ ιλλυδ ωφφενδιθ φελ.

Mine is on the left
-------------------------------
बनाति बहतर आंतरजाल भेदनक्षमता रहारुप समस्याओ स्वतंत्र जानते कीसे सुना वर्णन प्रमान कार्यलय व्रुद्धि करता। मेंभटृ करेसाथ आवश्यकत नीचे गटकउसि केन्द्रिय जिसे पहोच। होगा निरपेक्ष कार्यसिधान्तो हिंदी संसाध विनिमय स्वतंत्र स्वतंत्रता उशकी मजबुत परस्पर प्रौध्योगिकी समूह अधिकार करके(विशेष हिंदी जिसे प्रेरना आंतरजाल बाधा करता। उदेश हमारि वर्तमान आंतरजाल पुष्टिकर्ता गुजरना कार्यसिधान्तो प्रति उशकी


<hr />

<div class="floatRight tall">just floatin'...</div>
But we can still style the elements
=========================
Let's put a width rule on me !
--------------------
緷 犿玒 櫞氌瀙 郙鬯偟 騩鰒 觢 嫀嵥嵧 忣抏旲 鑴鱱爧, 緅 箷箯緷 耏胠臿 忷扴汥 獝瘝 稯 鳼鳹 嗢嗂塝 慖摲摓, 鳱 潿熥獘 獿譿躐 賕踃 蜙 簻臗藱 蒰裧頖 澉澂 磑 梪涫 婰婜孲 爂犤繵

Me too !
----------------------
槯秺びゃㄨ稞 䥦勯ちゃ妥ち ぬ覜驩 飌蟦 ノよ 妥ち餥 ウァぶヘ橎にゃ キつ䧟ぴゅゝ きゅ樃きゃり雦 갤䣵奥しょく 饥苯が 滥坩, 礨愥䝣杧ゑ ピョ椧ぺ㣌黨 奯䰦 橯土ぽ きゅ樃きゃり雦 䤩横みょ騟觊 骤簣雤娪び じょ饪嶣 じょ饪, リュにびゅ䧨㫤 择にゅ秤し饦 りょ埥嫣ほ褎 焩谦 誣鏨奯, 壃㛤 壃㛤秞 エ馺堥きょ饟 え駧わ背ちゅ ホ焧䣃ヴィェ簨

To be or not to be...
-------------------------------
في جُل شرسة الشمال الثانية, إذ بمباركة الموسوعة لمّ, حدى تاريخ والنازي للأراضي تم. حين وبعض الإثنان التاريخ، أم, إذ للألمان إستراتيجية جوي. إذ الحكم الشهير كلّ, فهرست السيطرة العسكرية بين بل. جورج وصافرات والمعدات أم بها. و مليارات المانيا أوكيناوا حرب.

Hover me !!
--------------------
אחרים הראשי זכויות או לוח, מלא על עזרה שאלות נבחרים. פנאי בדפים על אחר, רבה חשמל נוסחאות מה. צ'ט או נפלו כימיה מושגי, לחבר מוסיקה עוד מה, על כלל ערכים עקרונות. ומהימנה העריכהגירסאות מה רבה, גם תורת מושגי קרן. או והוא כניסה בעברית אנא, לציין באגים המקושרים תנך של. ברוכים פסיכולוגיה בדף על, או ביולי לימודים זאת, שער בה ממונרכיה טכנולוגיה ואלקטרוניקה.

            
          
!
            
              /* Decoration */
$bgcolor: #F6F0EE;
$bg1: transparentize(#999, 1);
$bg2: transparentize(#999, 0.95);

//$bg-opacity: .05;

//

$bg-opacity: 0 !default;

body {
  font: 15px/1.3 Monaco, MonoSpace;

  background-image: linear-gradient(
    45deg, $bg1 25%, $bg2 25%, $bg2 50%, $bg1 50%, $bg1 75%, $bg2 75%
  );
  background-size: 5vw 5vw;
  background-color: $bgcolor;
  background-attachment: fixed;
  padding: 1em;  
}

h1 { background-color: rgba(191,191,0,$bg-opacity*2); text-align: center; margin-top: 0em; margin-bottom: 1.5em;}

h2 { background-color: rgba(127,0,0,$bg-opacity); }
p {  background-color: rgba(0,0,127,$bg-opacity); text-indent: 1em; text-align: justify; display: block;}

hr {
  border: none;
  height: 3em;
  display: block;
  
}

.floatLeft { float: left; margin: 0 1em 1em 0; }
.floatRight { float: right; margin: 0 0 1em 1em; }
.floatLeft, .floatRight {background-color: rgba(0,127,0,$bg-opacity); display: inline-block; width: 10em; height: 10em; border: .15em solid black; text-align: center; font-weight: bold; }
.tall {height: 25em;}


/* Main Feature */
@mixin linesOnSides ( $sides: both, $thickness: 0.1em, $color: black, $inner-padding: 1em ){
  // "display: block" behavior : 
  display: table; width: auto;
  // avoiding the title to wrap;
  white-space: nowrap;


  // The lines :
  $pseudo-list: null;
  @if($sides == left or $sides == both ){
    $pseudo-list: append($pseudo-list, unquote("&:before"), comma);
  }
  @if($sides == right or $sides == both ){
    $pseudo-list: append($pseudo-list, unquote("&:after"), comma);
  }

  #{$pseudo-list} {
    // here a NonBreakableSPace.
    content: " ";
    
    // the width of cells of a row is not greater than row:
    display: table-cell;
    @if( $sides == both ){
    width: 50%;
    }@else{
    width: 100%;      
    }
    
    // drawing lines :
    background-image: linear-gradient($color, $color);
    background-size: 100% $thickness;
    background-repeat: no-repeat;
    background-position: center;
    
    box-sizing: border-box;
  }


  @if($sides == left or $sides == both ){
    &:before { border-right: $inner-padding transparent solid; }
  }
  @if($sides == right or $sides == both ){
    &:after {  border-left: $inner-padding transparent solid; }
  }

}



// Usage
h2:nth-of-type(3n + 1){ @include linesOnSides( both, 0.1em, black ); }
h2:nth-of-type(3n + 2){ @include linesOnSides( right, 0.1em, black ); }
h2:nth-of-type(3n + 3){ @include linesOnSides( left, 0.1em, black ); }

h2:nth-of-type(4){ width: 75%; }

h2:nth-of-type(5){ width: 50%; margin-left: auto; }

h2:nth-of-type(6){ width: 50%; margin-left: auto; margin-right: auto; }

h2:nth-of-type(7){
  text-decoration: underline;
  width: 0.01%; margin-left: auto; margin-right: auto;
  transition: width 500ms ease-in-ouy;
  &:hover{ width: 100%;}
}

h2:nth-of-type(7){
  text-decoration: underline;
  width: 0.01%; margin-left: auto; margin-right: auto;
  transition: width 500ms ease-in-out;
  &:hover{ width: 100%;}
}


.afterline {
  @include linesOnSides( right, 0.1em, white );
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console