html５ぱんくず設定について

はじめましてhtml５ぱんくずを設定したのですが上手く表示しません。
もし可能でございましたらご教授くだされないでしょうか？
宜しくお願い致します。

<ul class="breadcrumb">
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="https://～/" itemprop="url">
<span itemprop="title">TOP</span>
</a>
</li>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">～</span>
</li>
</ul>
<style type="text/css">
<!--

.breadcrumb{
padding-left:0;
margin-left:0;
text-align: left; /* 文字の左揃え */

}

.breadcrumb li{
display:inline;/*横に並ぶように*/
list-style: none;
font-weight: bold;/*太字*/
}

.breadcrumb li::after{
/* >を表示*/
content: '>';
padding: 0 3px;
color: #555;
}

.breadcrumb li:last-child::after{
content: '';
}

.breadcrumb li a{
text-decoration:underline;
color: #52b5ee;/*色*/
}

.breadcrumb li a:hover{
text-decoration: underline;
}
-->
</style>

質問者からの補足コメント

• 

  お世話になります。
  
  インターネットで
  
  例えばhttp://～.com › 専門学校で学ぶ のような表示になりません。

  No.2の回答に寄せられた補足コメントです。 補足日時：2017/10/16 14:25

No.2 回答者： yambejp 回答日時： 2017/10/16 11:42

普通に表示されるとおもいますが、なにをもって「うまくいかない」と感じているのでしょうか？

ちなみに「教示する」ですが、「教授する」も正しいです

No.1 回答者： sainte 回答日時： 2017/10/15 22:37

ご教授じゃなくてご教示