Key¶

Description: The key property can be defined in the option Object.

ctr('.test', {
  width: 200px
  element: {
    option: {
      key: 'after'
    }
    content: 'ctr'
    font-size: 1em
  }
})

.test:
  width: 200px
  element:
    option:
      key: after
    content: ctr
    font-size: 1em

.test {
  width: 200px;
}
.test::after {
  font-size: 1em;
  content: "ctr";
}

ctr('.test', {
  width: 200px
  element: {
    option: {
      key: 'after'
    }
    content: 'ctr'
    font-size: 1em
  }
})

.test {
  width: 200px;
}
.test::after {
  font-size: 1em;
  content: "ctr";
}

.test:
  width: 200px
  element:
    option:
      key: after
    content: ctr
    font-size: 1em

Colon¶

Description: The number of colons can be altered through the colon option property.

ctr('.test', {
  width: 200px
  before: {
    option: {
      colon: ':'
    }
    content: 'beer'
  }
  after: {
    option: {
      colon: ':::::::::::::::::'
    }
    content: 'whiskey'
  }
})

.test:
  width: 200px
  before:
    option:
      colon: ':'
    content: beer
  after:
    option:
      colon: ':::::::::::::::::'
    content: whiskey

.test {
  width: 200px;
}
.test:before {
  content: "beer";
}
.test:::::::::::::::::after {
  content: "whiskey";
}

ctr('.test', {
  width: 200px
  before: {
    option: {
      colon: ':'
    }
    content: 'beer'
  }
  after: {
    option: {
      colon: ':::::::::::::::::'
    }
    content: 'whiskey'
  }
})

.test {
  width: 200px;
}
.test:before {
  content: "beer";
}
.test:::::::::::::::::after {
  content: "whiskey";
}

.test:
  width: 200px
  before:
    option:
      colon: ':'
    content: beer
  after:
    option:
      colon: ':::::::::::::::::'
    content: whiskey

Notes

• Unless you are supporting the browser which must not be named, there is no need for this option

Stringify¶

Description: The value of false for the stringify option property ensures the content value is not converted into a String.

ctr('.test', {
  width: 200px
  counter-increment: linenumber
  before: {
    option: {
      stringify: false
    }
    content: counter(linenumber)
  }
})

.test:
  width: 200px
  counter-increment: linenumber
  before:
    option:
      stringify: false
    content: counter(linenumber)

.test {
  width: 200px;
  counter-increment: linenumber;
}
.test::before {
  content: counter(linenumber);
}

ctr('.test', {
  width: 200px
  counter-increment: linenumber
  before: {
    option: {
      stringify: false
    }
    content: counter(linenumber)
  }
})

.test {
  width: 200px;
  counter-increment: linenumber;
}
.test::before {
  content: counter(linenumber);
}

.test:
  width: 200px
  counter-increment: linenumber
  before:
    option:
      stringify: false
    content: counter(linenumber)

Notes

• By default, all before and after pseudo-elements are converted into a String format

Content False¶

Description: The value of false for the content property is equivalent to "".

ctr('.test', {
  width: 200px
  before: {
    content: false
  }
})

.test:
  width: 200px
  before:
    content: false

.test {
  width: 200px;
}
.test::before {
  content: "";
}

ctr('.test', {
  width: 200px
  before: {
    content: false
  }
})

.test {
  width: 200px;
}
.test::before {
  content: "";
}

.test:
  width: 200px
  before:
    content: false