CSS-дополнения для blockquote в javascript/jquery

Question

У меня есть пара строк в различных абзацах внутри элементов span. Мое намерение состоит в том, чтобы вытащить текст и динамически добавить элемент blockquote в мой javascript, используя jQuery. Все работает как надо, кроме стиля, и я не уверен почему.

Я не стреляю ни за что причудливое - строчка над / под текстом, отступ, увеличение размера шрифта.

Когда я применяю границу, это относится к КАЖДОЙ ЛИНИИ! И поле применяется только к первой строке, а не ко всему элементу.

Есть идеи, что я здесь делаю не так? Я также попытался добавить класс к элементу Q, результаты те же.

$(document).ready(function() {

$("span").each(function() {
    var quote = ($(this).text()); 
    quote = quote.substr(0,1).toUpperCase()+quote.substr(1); // Capitalize first letter
    quote = ("<q>"+quote+"</q>"); // add blockquote element to string
    $(this).parent().after(quote); // insert blockquote after parent of span
    $("q").css( {
    //  "border": "3px gray" ,
    //  "border-style": "ridge none",
        "font-size": "125%",
        "margin": "1em",
        "color": "red"
    });
}); // end each

}); // end ready

Answer 1

q Элемент является встроенным элементом. Как только вы измените дисплей на block или же inline-block, ваша проблема будет исправлена.